${code}
16 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/OmbCard/OmbIcon.tsx:
--------------------------------------------------------------------------------
1 | import { useNavigate } from 'react-router-dom';
2 | import { Icon } from '@iconify/react';
3 |
4 | import useI18n from '@/hooks/useI18n';
5 |
6 | interface OmbIcon {
7 | title: string;
8 | icon: string;
9 | to: string;
10 | onClick?: () => void;
11 | }
12 |
13 | const OmbIcon: React.FC
20 |
21 |
22 | {icon &&
26 |
28 | );
29 | };
30 |
31 | export default OmbCard;
32 |
--------------------------------------------------------------------------------
/src/layouts/index.tsx:
--------------------------------------------------------------------------------
1 | import GoBack from '@/components/GoBack';
2 |
3 | import './index.scss';
4 |
5 | interface LayoutProps {
6 | title: React.ReactNode;
7 | sider: React.ReactNode;
8 | children: React.ReactNode;
9 | }
10 |
11 | const Layout: React.FC
21 |
22 | {icon &&
26 | {children}
27 |
14 |
28 | );
29 | };
30 |
31 | export default Layout;
32 |
--------------------------------------------------------------------------------
/src/views/canvas/paper/components/SaveIcon/index.tsx:
--------------------------------------------------------------------------------
1 | export default function SaveIcon() {
2 | return (
3 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/layouts/FullSreen.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import { isValidElement } from 'react';
3 |
4 | import GoBack from '@/components/GoBack';
5 |
6 | import './fullscreen.scss';
7 |
8 | interface FullScreenProps {
9 | className?: string;
10 | hasGoBack?: boolean;
11 | taskbar?: React.ReactNode;
12 | children: React.ReactNode;
13 | }
14 |
15 | const FullScreen: React.FC
15 |
23 |
24 |
16 |
19 |
20 |
22 | {sider}
21 |
25 |
27 | {children}
26 |
23 | {hasGoBack && !taskbar &&
32 | );
33 | };
34 |
35 | export default FullScreen;
36 |
--------------------------------------------------------------------------------
/src/system/os.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react'
2 | import { os } from '@tauri-apps/api'
3 |
4 | function OsInfo() {
5 | const [arch, setArch] = useState('')
6 | const [platform, setPlatform] = useState('')
7 | const [tempdir, setTempdir] = useState('')
8 | const [type, setType] = useState('')
9 | const [version, setVersion] = useState('')
10 |
11 | useEffect(() => {
12 | os.arch().then(setArch)
13 | os.platform().then(setPlatform)
14 | os.tempdir().then(setTempdir)
15 | os.type().then(setType)
16 | os.version().then(setVersion)
17 | }, [])
18 |
19 | return (
20 |
26 |
29 | )}
30 | {children}
31 |
21 |
29 | )
30 | }
31 |
32 | export default OsInfo;
33 |
--------------------------------------------------------------------------------
/src/components/OmbCard/index.scss:
--------------------------------------------------------------------------------
1 | .omb-card {
2 | width: 100%;
3 |
4 | h2 {
5 | > span {
6 | display: inline-flex;
7 | align-items: center;
8 | font-size: 14px;
9 | background-color: #2a2a2a;
10 | padding: 4px 10px;
11 | color: #fff;
12 | border-radius: 5px;
13 | }
14 |
15 | .icon {
16 | margin-right: 5px;
17 | }
18 | }
19 |
20 | &-group {
21 | &-item {
22 | transition: 300ms ease;
23 | > div {
24 | cursor: pointer;
25 | user-select: none;
26 | -webkit-user-select: none;
27 | }
28 | }
29 | }
30 |
31 | &-icon {
32 | display: flex;
33 | flex-direction: column;
34 | align-items: center;
35 | width: 80px;
36 | cursor: pointer;
37 | transition: all 1s ease;
38 |
39 | * {
40 | color: #666;
41 | }
42 |
43 | &:hover * {
44 | color: #121212;
45 | }
46 |
47 | b {
48 | font-size: 12px;
49 | }
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/views/canvas/paper/components/BrushIcon/index.tsx:
--------------------------------------------------------------------------------
1 | export default function BrushIcon() {
2 | return (
3 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/utils/tools.ts:
--------------------------------------------------------------------------------
1 | import dayjs from 'dayjs';
2 |
3 | export const fmtI18n = (...args: any[]) => {
4 | const i18nMap: Record-
22 |
- CPU 架构: {arch} 23 |
- 平台名称: {platform} 24 |
- 临时文件目录: {tempdir} 25 |
- 系统类型: {type} 26 |
- 系统版本: {version} 27 |
9 |
11 |
22 |
26 |
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/src/components/OmbCard/OmbItem.tsx:
--------------------------------------------------------------------------------
1 | import { useNavigate } from 'react-router-dom';
2 | import clsx from 'clsx';
3 |
4 | interface OmbItemProps {
5 | to?: string;
6 | children: React.ReactNode;
7 | className?: string;
8 | cardClass?: string;
9 | onClick?: () => void;
10 | }
11 |
12 | const OmbItem: React.FC
35 |
45 | );
46 | };
47 |
48 | export default OmbItem;
49 |
--------------------------------------------------------------------------------
/src-tauri/Cargo.toml:
--------------------------------------------------------------------------------
1 | [package]
2 | name = "omb"
3 | version = "0.0.0"
4 | description = "OhMyBox"
5 | authors = ["lencx
42 | {children}
43 |
44 |
35 |
36 |
37 |
43 | {preview && (
44 |
45 |
47 | )}
48 |
49 |
50 | );
51 | };
52 |
53 | export default Editor;
54 |
--------------------------------------------------------------------------------
/src/components/Slider/index.scss:
--------------------------------------------------------------------------------
1 | .omb-slider {
2 | position: relative;
3 | width: 100%;
4 | height: 6px;
5 | width: 100%;
6 | margin: 10px 0;
7 |
8 | &-rail {
9 | position: absolute;
10 | height: 6px;
11 | width: 100%;
12 | background-color: #e8e8e8;
13 | border-radius: 3px;
14 | }
15 |
16 | &-track {
17 | height: 6px;
18 | position: absolute;
19 | background-color: #4a4a4a;
20 | border-radius: 3px;
21 | }
22 |
23 | &-handle {
24 | position: absolute;
25 | top: -4px;
26 | height: 14px;
27 | width: 14px;
28 | border-radius: 50%;
29 | background-color: #2a2a2a;
30 | cursor: grabbing;
31 | }
32 | }
33 |
34 | .omb-slider-tooltip {
35 | display: inline-block;
36 | padding: 4px 0 5px;
37 |
38 | &-content {
39 | background-color: rgba(#000, 0.8);
40 | color: #fff;
41 | font-size: 0.8rem;
42 | padding: 4px 6px;
43 | border-radius: 4px;
44 | }
45 | // &-inner {
46 | // background-color: rgba(#000, 0.8);
47 | // color: #fff;
48 | // font-size: 0.8rem;
49 | // padding: 4px 6px;
50 | // border-radius: 4px;
51 | // }
52 |
53 | &-arrow {
54 | bottom: 0px;
55 | margin-left: -5px;
56 | left: 50%;
57 | border-width: 5px 5px 0;
58 | position: absolute;
59 | width: 0;
60 | height: 0;
61 | border-color: transparent;
62 | border-top-color: rgba(#000, 0.8);
63 | border-style: solid;
64 | }
65 |
66 | &-hidden {
67 | display: none;
68 | }
69 |
70 | // &-dragging {
71 | // display: block;
72 | // }
73 | }
--------------------------------------------------------------------------------
/src/views/canvas/paper/components/EraserIcon/index.tsx:
--------------------------------------------------------------------------------
1 | export default function EraserIcon() {
2 | return (
3 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/src/views/canvas/paper/index.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from 'react';
2 | import { useParams } from 'react-router-dom';
3 |
4 | import GoBack from '@/components/GoBack';
5 | import useFullCanvas from '@/hooks/useFullCanvas';
6 | import { saveFile, getFile } from '@/system/fs';
7 | import { CANVAS_ROOT } from '@/utils/constant';
8 |
9 | import ToolPalette from './components/ToolPalette';
10 | import { Brush } from './canvas';
11 | import './index.scss';
12 |
13 | const InitBrush = new Brush();
14 |
15 | export default function CanvasPaperView() {
16 | const canvasRef = useRef{preview(content)}
46 |
48 |
56 | );
57 | }
58 |
--------------------------------------------------------------------------------
/src/components/InputText/index.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 |
3 | import './index.scss';
4 |
5 | interface InputTextProps {
6 | isEdit?: boolean;
7 | defaultValue?: string;
8 | onChange?: (val: string) => void;
9 | }
10 |
11 | const InputText: React.FC
47 |
66 | );
67 | };
68 |
69 | export default AddDirButton;
70 |
--------------------------------------------------------------------------------
/src/components/Tabs/index.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useMemo, Children, isValidElement } from 'react';
2 | import clsx from 'clsx';
3 |
4 | import './index.scss';
5 |
6 | const parseTabList = (children: React.ReactNode) => {
7 | return Children.map(children, (node) => {
8 | if (isValidElement(node) && node.props.tab) return node;
9 | return null;
10 | })?.filter((node) => node);
11 | };
12 |
13 | interface TabsProps {
14 | className?: string;
15 | children: React.ReactElement[];
16 | onChange?: (tabKey: string, index: number) => void;
17 | }
18 |
19 | const Tabs: React.FC
30 |
45 | );
46 | };
47 |
48 | interface TabPaneProps {
49 | tab: React.ReactNode;
50 | tabKey: string;
51 | children: any;
52 | className?: string;
53 | }
54 |
55 | const TabPane: React.FC
31 | {tabs?.map((node: any, idx) => {
32 | return (
33 |
43 | handleChange(node?.props?.tabKey, idx)}
36 | className={clsx({ active: activeIndex === idx })}
37 | >
38 | {node.props.tab}
39 |
40 | );
41 | })}
42 | {children[activeIndex]}
44 | {children}
;
57 | };
58 |
59 | export type TabsType = typeof Tabs & { TabPane: typeof TabPane };
60 | (Tabs as TabsType).TabPane = TabPane;
61 |
62 | export default Tabs as TabsType;
63 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "omb",
3 | "private": true,
4 | "version": "0.1.7",
5 | "author": "lencx
39 |
40 |
45 |
47 |
48 | }
49 | className="mdhub-view"
50 | >
51 | 
62 |
63 | ## License
64 |
65 | GPL-3.0 license © 2022 lencx
66 |
--------------------------------------------------------------------------------
/src/components/Slider/index.tsx:
--------------------------------------------------------------------------------
1 | import { useRef, useEffect } from 'react';
2 | import Slider from 'rc-slider';
3 | import raf from 'rc-util/lib/raf';
4 | import Tooltip from 'rc-tooltip';
5 | import type { SliderProps } from 'rc-slider';
6 |
7 | import './index.scss';
8 |
9 | interface HandleTooltipProps {
10 | value: number;
11 | children: React.ReactElement;
12 | visible: boolean;
13 | tipFormatter?: (value: number) => React.ReactNode;
14 | }
15 |
16 | const HandleTooltip: React.FC setToc(idx)}
67 | className={clsx('group-item', { active })}
68 | >
69 | removeDir(i.name)} />
82 |
83 | );
84 | })}
85 |
86 | }
87 | >
88 | {tocTree.length > 0 && (
89 |
70 |
71 | handleRename(i.name, v)}
79 | />
80 |
81 | {paper.name}
104 |
73 | (
77 |
82 | (
86 |
126 |
127 |
134 |
137 |
138 |
139 | );
140 | };
141 |
142 | export default ToolPalette;
143 |
--------------------------------------------------------------------------------
/src/views/canvas/paper/components/ColorPicker/index.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import clsx from 'clsx';
3 | import { HexColorPicker, HexColorInput } from 'react-colorful';
4 |
5 | import Tabs from '@/components/Tabs';
6 | import Tooltip from '@/components/Tooltip';
7 | import useI18n from '@/hooks/useI18n';
8 | import useLocalColor from '@/hooks/useLocalColor';
9 | import './index.scss';
10 |
11 | const { TabPane } = Tabs;
12 |
13 | const COLOR_LIST = [
14 | '#000000',
15 | '#5f6368',
16 | '#9aa0a6',
17 | '#dadce0',
18 | '#f1f3f4',
19 | '#ffffff',
20 | '#f28b82',
21 | '#fdd663',
22 | '#81c995',
23 | '#78d9ec',
24 | '#8ab4f8',
25 | '#c58af9',
26 | '#ea4335',
27 | '#fbbc04',
28 | '#34a853',
29 | '#24c1e0',
30 | '#4285f4',
31 | '#a142f4',
32 | '#c5221f',
33 | '#f29900',
34 | '#188038',
35 | '#12a4af',
36 | '#1967d2',
37 | '#8430ce',
38 | ];
39 |
40 | interface ColorPickerProps {
41 | onChange?: (color: string) => void;
42 | defaultValue?: string;
43 | }
44 |
45 | const ColorPicker: React.FC
87 |
120 | )}
121 | >
122 |
125 |
88 |
109 |
89 | v}
94 | onChange={handleSize}
95 | value={size}
96 | />
97 |
98 | {t('common:size')}
90 |
99 | v}
104 | onChange={handleOpacity}
105 | value={opacity}
106 | />
107 |
108 | {t('common:opacity')}
100 |
110 |
118 |
119 |
131 |
133 |
105 | {COLOR_LIST.map((i, idx) => {
106 | return (
107 |
108 |
117 | );
118 | })}
119 |
120 | handleColor(i, idx)}
113 | >
114 |
115 |
116 |
121 |
140 | {t('common:recent')}
122 |
123 | {localColors.map((i, idx) => {
124 | const _idx = 24 + idx;
125 | return (
126 |
127 |
136 | );
137 | })}
138 |
139 | handleColor(i, _idx)}
132 | >
133 |
134 |
135 |
152 | HEX #
153 |
155 |
22 |
25 | {/* */}
26 |
27 |