@@ -13,9 +28,27 @@ const { frontmatter } = useData();
diff --git a/app/.vitepress/src/layouts/LayoutNews.vue b/app/.vitepress/src/layouts/LayoutNews.vue
deleted file mode 100644
index 2ce1cb37e5c92a6e91d23c2957ff191d98e92e35..0000000000000000000000000000000000000000
--- a/app/.vitepress/src/layouts/LayoutNews.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-
-
-
diff --git a/app/.vitepress/src/shared/@types/type-blogs.ts b/app/.vitepress/src/shared/@types/type-blogs.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9dc57126843aed66eecd776daa8f6cbadf323e97
--- /dev/null
+++ b/app/.vitepress/src/shared/@types/type-blogs.ts
@@ -0,0 +1,26 @@
+export interface BlogItemT {
+ archives: string;
+ articleName: string;
+ author: any;
+ category: string;
+ date: string;
+ deleteType: string;
+ lang: string;
+ path: string;
+ summary: string;
+ tags: string[];
+ textContent: string;
+ title: string;
+ type: string;
+ views: number;
+}
+
+export interface ParamsType {
+ page: number;
+ pageSize: number;
+ lang: string;
+ category: string;
+ archives?: string;
+ author?: string;
+ tags?: string;
+}
diff --git a/app/.vitepress/src/shared/category.ts b/app/.vitepress/src/shared/category.ts
new file mode 100644
index 0000000000000000000000000000000000000000..09418d1383dc6956ce92666e32263c5e7dc52582
--- /dev/null
+++ b/app/.vitepress/src/shared/category.ts
@@ -0,0 +1,3 @@
+const categories: string[] = ['security', 'news', 'blog', 'events', 'showcase'];
+
+export default categories;
diff --git a/app/.vitepress/src/shared/lang.ts b/app/.vitepress/src/shared/lang.ts
deleted file mode 100644
index c72b03d6d6a6c4b25f48da7e4770e341dc77aec3..0000000000000000000000000000000000000000
--- a/app/.vitepress/src/shared/lang.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export function getNewPath(lang: string, path: string) {
- const newLang = lang === 'zh' ? 'en' : 'zh';
- return path.replace(`/${lang}/`, `/${newLang}/`);
-}
diff --git a/app/.vitepress/src/shared/styles/base.scss b/app/.vitepress/src/shared/styles/base.scss
index f6d1cedbc268f53cb89fc58df5837487829742eb..a4d6e0df5737f63fb217346328eca51be3fbf62e 100644
--- a/app/.vitepress/src/shared/styles/base.scss
+++ b/app/.vitepress/src/shared/styles/base.scss
@@ -7,10 +7,7 @@ body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- // background: var(--theme-page-bg);
box-sizing: border-box;
- overflow-x: hidden;
- overflow-y: auto;
font-family: 'Helvetica', 'Arial', 'PingFang SC', 'Microsoft YaHei',
sans-serif;
&::-webkit-scrollbar-track {
@@ -30,7 +27,7 @@ body {
}
:root.dark {
- --el-color-primary: var(--o-color-kleinblue8);
+ --el-color-primary: var(--o-color-trafficpurple8);
}
*,
@@ -50,12 +47,8 @@ img {
}
a {
- cursor: pointer;
color: var(--o-color-link1);
text-decoration: none;
- &:hover {
- color: var(--o-color-link2);
- }
&:active {
color: var(--o-color-link3);
}
@@ -89,6 +82,22 @@ ul {
.overflow {
overflow: hidden;
}
-.hm-t-container {
- display: none;
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-weight: 400;
+}
+
+// 顶部偏移
+html {
+ scroll-padding-top: 80px;
+}
+
+::target-text {
+ background-color: var(--o-color-brand1);
+ color: #fff;
}
diff --git a/app/.vitepress/src/shared/styles/element-plus/_message.scss b/app/.vitepress/src/shared/styles/element-plus/_message.scss
new file mode 100644
index 0000000000000000000000000000000000000000..001bfe2efb3df2b85f8ae1d3d51c0e630d80b029
--- /dev/null
+++ b/app/.vitepress/src/shared/styles/element-plus/_message.scss
@@ -0,0 +1,53 @@
+.el-message {
+ justify-content: center;
+ top: 104px !important;
+ height: 112px;
+ border-radius: 0;
+ background: var(--o-color-bg2) !important;
+ box-shadow: var(--o-shadow-l4);
+ font-size: var(--o-font-h4);
+ --el-message-border-color: var(--o-color-bg2);
+ min-width: 480px;
+ .el-message__icon {
+ margin-right: var(--o-spacing-h6);
+ font-size: var(--o-font-size-h5);
+ }
+
+ .el-message__content {
+ text-overflow: -o-ellipsis-lastline;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ line-clamp: 2;
+ -webkit-box-orient: vertical;
+ color: var(--o-color-text1) !important;
+ font-size: var(--o-font-size-h7);
+ }
+
+ @media screen and (max-width: 867px) {
+ height: inherit;
+ max-width: 280px;
+ min-width: 0;
+
+ .el-message__icon {
+ font-size: var(--o-font-size-h8);
+ }
+
+ .el-message__content {
+ font-size: var(--o-font-size-tip);
+ }
+ }
+}
+.home-loading {
+ .el-loading-mask {
+ display: none;
+ }
+}
+:is(.el-loading-parent--relative) {
+ pointer-events: auto;
+ user-select: auto;
+}
+:is(.el-button, .el-message-box) {
+ border-radius: 0;
+}
diff --git a/app/.vitepress/src/shared/styles/element-plus/index.scss b/app/.vitepress/src/shared/styles/element-plus/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..92b7bdbaa34413bb372e987a4aa0c85e38ba4dba
--- /dev/null
+++ b/app/.vitepress/src/shared/styles/element-plus/index.scss
@@ -0,0 +1,21 @@
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+ $colors: (
+ 'primary': (
+ 'base': #7d32ea,
+ ),
+ 'success': (
+ 'base': #82c04d,
+ ),
+ 'warning': (
+ 'base': #f0934b,
+ ),
+ 'danger': (
+ 'base': #f3524d,
+ ),
+ 'error': (
+ 'base': #f3524d,
+ ),
+ )
+);
+
+@use 'element-plus/theme-chalk/src/index.scss' as *;
diff --git a/app/.vitepress/src/shared/styles/index.scss b/app/.vitepress/src/shared/styles/index.scss
index b2afe418a616587baa9c28755517aa9876f66fef..92e9542920173d4217e4e2cf1e861f20089e497b 100644
--- a/app/.vitepress/src/shared/styles/index.scss
+++ b/app/.vitepress/src/shared/styles/index.scss
@@ -1,5 +1,4 @@
-@import './normalize.scss';
@import './base.scss';
-@import './opendesign/index.scss';
-@import './opendesign/theme-dark.scss';
@import './markdown.scss';
+@import './element-plus/message';
+@import './theme-dark.scss';
diff --git a/app/.vitepress/src/shared/styles/markdown.scss b/app/.vitepress/src/shared/styles/markdown.scss
index 7e1dc2eeb68d3075506db5d69fb8ad37f08dd719..15892cd79e9c09f820c6ab52277995500fe91706 100644
--- a/app/.vitepress/src/shared/styles/markdown.scss
+++ b/app/.vitepress/src/shared/styles/markdown.scss
@@ -4,7 +4,7 @@
min-height: calc(100vh - 443px);
padding: 40px;
margin: var(--o-spacing-h2) auto;
- margin-bottom: var(--o-spacing-h1);
+ margin-bottom: 0;
background-color: var(--o-color-bg2);
box-shadow: var(--o-shadow-l1);
& > *:first-child {
@@ -23,6 +23,7 @@
margin-top: var(--o-spacing-h5);
margin-bottom: var(--o-spacing-h2);
}
+
ol,
ul {
list-style: inherit;
@@ -30,6 +31,7 @@
a {
word-break: break-all;
+ display: inline-block;
}
h1,
@@ -39,7 +41,6 @@
h5,
h6 {
color: var(--o-color-text1);
- font-weight: normal;
a {
display: none;
@@ -114,22 +115,26 @@
margin-top: var(--o-spacing-h8);
margin-bottom: var(--o-spacing-h8);
font-size: var(--o-font-size-text);
- font-weight: normal;
- word-break: break-all;
+ font-weight: 400;
color: var(--o-color-text4);
line-height: var(--o-line-height-text);
@media screen and (max-width: 768px) {
font-size: var(--o-font-size-tip);
+ text-align: justify;
+ }
+ }
+ p {
+ strong {
+ color: var(--o-color-text3);
}
}
ul,
ol {
- padding-left: 1em;
-
+ padding-left: 2em;
li {
&::marker {
- color: var(--o-color-text1);
+ color: var(--o-color-text3);
}
}
}
@@ -178,29 +183,18 @@
img {
max-width: 100%;
+ @media screen and (max-width: 767px) {
+ width: 100% !important;
+ }
}
- video {
- width: 100%;
- }
-
- // a[href^='#'] {
- // display: none;
- // }
- div[class*='language-'] {
- // position: relative;
- // margin: 8px 0;
- // background-color: var(--o-color-bg1);
- // box-shadow: var(--o-shadow-l1);
- // overflow-x: auto;
- pre {
- background-color: #272822;
- }
+ a[href^='#'] {
+ display: none;
}
code,
pre {
text-align: left;
- white-space: pre;
+ white-space: pre-wrap;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
@@ -211,6 +205,9 @@
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
+ line-height: 1.45;
+ font-family: 'Helvetica', 'Arial', 'PingFang SC', 'Microsoft YaHei',
+ sans-serif;
}
pre {
@@ -220,10 +217,8 @@
box-shadow: var(--o-shadow-l1);
overflow-x: auto;
z-index: 1;
- padding: 24px 32px;
- @media screen and (max-width: 768px) {
- padding: 12px 24px;
- }
+ padding: 24px 40px;
+ font-size: 14px;
&::-webkit-scrollbar-track {
border-radius: 4px;
background-color: var(--o-color-bg2);
@@ -238,27 +233,32 @@
border-radius: 4px;
background: var(--o-color-bg4);
}
+ @media (max-width: 768px) {
+ padding: 16px;
+ }
}
-
- code {
- padding: 0;
- line-height: var(--o-line-height-text);
+ pre code {
+ color: var(--o-color-text3);
+ }
+ p code,
+ li code {
+ line-height: 16px;
font-size: var(--o-font-size-text);
- color: var(--o-color-text1);
+ padding: 0 4px;
+ background-color: var(--o-color-bg-secondary);
+ border: 1px solid var(--o-color-border2);
+ display: inline-block;
+ font-weight: 300;
}
}
-.dark .markdown img {
- filter: brightness(80%) grayscale(20%) contrast(1.2);
-}
-
/**
* 法律声明 && 隐私政策
**/
.legal-privacy {
margin: 0 auto;
padding: 0;
- padding-top: 94px;
+ padding-top: 64px;
padding-bottom: var(--o-spacing-h1);
max-width: 880px;
background: var(--o-color-bg1);
@@ -266,8 +266,7 @@
}
@media screen and (max-width: 768px) {
.legal-privacy {
- padding-top: 0;
- margin-top: var(--o-spacing-h2);
+ padding-top: var(--o-spacing-h2);
padding-bottom: var(--o-spacing-h2);
}
}
@@ -287,15 +286,31 @@
font-size: var(--o-font-size-h7);
letter-spacing: 0;
line-height: var(--o-line-height-h8);
- font-weight: 700;
+ font-weight: 300;
margin-bottom: var(--o-spacing-h6);
}
+.legal-privacy h3 {
+ font-weight: 300;
+}
@media screen and (max-width: 768px) {
.legal-privacy h2 {
font-size: var(--o-font-size-text);
letter-spacing: 0;
line-height: var(--o-line-height-text);
- font-weight: 700;
+ font-weight: 300;
margin-bottom: --o-spacing-h8;
}
}
+.dark .markdown img {
+ filter: brightness(0.8) grayscale(0.2) contrast(1.2);
+}
+
+.contribution-markdown {
+ padding-bottom: var(--o-spacing-h1);
+ @media screen and (min-width: 768px) and (max-width: 1100px) {
+ padding-bottom: var(--o-spacing-h2);
+ }
+ @media screen and (max-width: 768px) {
+ padding-bottom: 0;
+ }
+}
diff --git a/app/.vitepress/src/shared/styles/normalize.scss b/app/.vitepress/src/shared/styles/normalize.scss
deleted file mode 100644
index ec4f1f581fdb1d954926c6473f35c26ca456ca5f..0000000000000000000000000000000000000000
--- a/app/.vitepress/src/shared/styles/normalize.scss
+++ /dev/null
@@ -1,351 +0,0 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-
-/* Document
- ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-
-html {
- line-height: 1.15; /* 1 */
- -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/* Sections
- ========================================================================== */
-
-/**
- * Remove the margin in all browsers.
- */
-
-body {
- margin: 0;
-}
-
-/**
- * Render the `main` element consistently in IE.
- */
-
-main {
- display: block;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
- font-size: 2em;
- margin: 0 0;
-}
-
-/* Grouping content
- ========================================================================== */
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
- box-sizing: content-box; /* 1 */
- height: 0; /* 1 */
- overflow: visible; /* 2 */
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-pre {
- // font-family: monospace, monospace; /* 1 */
- font-size: 1em; /* 2 */
-}
-
-/* Text-level semantics
- ========================================================================== */
-
-/**
- * Remove the gray background on active links in IE 10.
- */
-
-a {
- background-color: transparent;
-}
-
-/**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
- border-bottom: none; /* 1 */
- text-decoration: underline; /* 2 */
- text-decoration: underline dotted; /* 2 */
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
- font-weight: bolder;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-samp {
- // font-family: monospace, monospace; /* 1 */
- font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
- font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline;
-}
-
-sub {
- bottom: -0.25em;
-}
-
-sup {
- top: -0.5em;
-}
-
-/* Embedded content
- ========================================================================== */
-
-/**
- * Remove the border on images inside links in IE 10.
- */
-
-img {
- border-style: none;
-}
-
-/* Forms
- ========================================================================== */
-
-/**
- * 1. Change the font styles in all browsers.
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
- font-family: inherit; /* 1 */
- font-size: 100%; /* 1 */
- line-height: 1.15; /* 1 */
- margin: 0; /* 2 */
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input {
- /* 1 */
- overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select {
- /* 1 */
- text-transform: none;
-}
-
-/**
- * Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
- -webkit-appearance: button;
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type='button']::-moz-focus-inner,
-[type='reset']::-moz-focus-inner,
-[type='submit']::-moz-focus-inner {
- border-style: none;
- padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type='button']:-moz-focusring,
-[type='reset']:-moz-focusring,
-[type='submit']:-moz-focusring {
- outline: 1px dotted ButtonText;
-}
-
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
- padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- * `fieldset` elements in all browsers.
- */
-
-legend {
- box-sizing: border-box; /* 1 */
- color: inherit; /* 2 */
- display: table; /* 1 */
- max-width: 100%; /* 1 */
- padding: 0; /* 3 */
- white-space: normal; /* 1 */
-}
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
- vertical-align: baseline;
-}
-
-/**
- * Remove the default vertical scrollbar in IE 10+.
- */
-
-textarea {
- overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10.
- * 2. Remove the padding in IE 10.
- */
-
-[type='checkbox'],
-[type='radio'] {
- box-sizing: border-box; /* 1 */
- padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type='number']::-webkit-inner-spin-button,
-[type='number']::-webkit-outer-spin-button {
- height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type='search'] {
- -webkit-appearance: textfield; /* 1 */
- outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-
-[type='search']::-webkit-search-decoration {
- -webkit-appearance: none;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
- -webkit-appearance: button; /* 1 */
- font: inherit; /* 2 */
-}
-
-/* Interactive
- ========================================================================== */
-
-/*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-
-details {
- display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary {
- display: list-item;
-}
-
-/* Misc
- ========================================================================== */
-
-/**
- * Add the correct display in IE 10+.
- */
-
-template {
- display: none;
-}
-
-/**
- * Add the correct display in IE 10.
- */
-
-[hidden] {
- display: none;
-}
diff --git a/app/.vitepress/src/shared/styles/opendesign/theme-dark.scss b/app/.vitepress/src/shared/styles/theme-dark.scss
similarity index 75%
rename from app/.vitepress/src/shared/styles/opendesign/theme-dark.scss
rename to app/.vitepress/src/shared/styles/theme-dark.scss
index df2bb4a8407a16fce35abf70497b8da6fbf2e0fd..fa23af92706941d12b4c447c73ffa8ffe6915089 100644
--- a/app/.vitepress/src/shared/styles/opendesign/theme-dark.scss
+++ b/app/.vitepress/src/shared/styles/theme-dark.scss
@@ -15,12 +15,12 @@
--o-color-error3: var(--o-color-red1); // disabled
// 品牌色
- --o-color-brand1: var(--o-color-kleinblue8); // 常规
- --o-color-brand2: var(--o-color-kleinblue9); // 悬浮
- --o-color-brand3: var(--o-color-kleinblue5); // 点击确认
- --o-color-brand4: var(--o-color-kleinblue7); // 特殊场景
- --o-color-brand5: var(--o-color-kleinblue3); // 普通禁用
- --o-color-brand6: var(--o-color-kleinblue3); // 文字禁用
+ --o-color-brand1: var(--o-color-trafficpurple8); // 常规
+ --o-color-brand2: var(--o-color-trafficpurple9); // 悬浮
+ --o-color-brand3: var(--o-color-trafficpurple5); // 点击确认
+ --o-color-brand4: var(--o-color-trafficpurple7); // 特殊场景
+ --o-color-brand5: var(--o-color-trafficpurple3); // 普通禁用
+ --o-color-brand6: var(--o-color-trafficpurple3); // 文字禁用
// 文字颜色
--o-color-text1: var(--o-color-white); // 强调/正文标题
@@ -28,7 +28,7 @@
--o-color-text3: var(--o-color-neutral11); // 次强调/正文标题
--o-color-text4: var(--o-color-neutral9); // 次要信息/正文
--o-color-text5: var(--o-color-neutral5); // 置灰信息
- --o-color-text-secondary: var(--o-color-neutral6); // 次级文字颜色
+ --o-color-text-secondary: var(--o-color-neutral9); // 次级文字颜色
// 背景色
--o-color-bg1: var(--o-color-neutral1); // 整体背景色
@@ -37,20 +37,20 @@
--o-color-bg4: var(--o-color-greyblack3); // 三级容器背景色
--o-color-bg5: var(--o-color-greyblack3); // 弹出框、tooltip背景色
--o-color-bg6: rgba(0, 0, 0, 0.5); // 蒙层
- --o-color-bg-secondary: var(--o-color-greyblack2); // 次级背景颜色
+ --o-color-bg-secondary: var(--o-color-neutral5); // 刺激背景颜色
// 链接色
- --o-color-link1: var(--o-color-kleinblue8); // 常规
- --o-color-link2: var(--o-color-kleinblue9); // 悬浮
- --o-color-link3: var(--o-color-kleinblue5); // 点击
- --o-color-link4: var(--o-color-kleinblue7); // 特殊场景
- --o-color-link5: var(--o-color-kleinblue3); // 一般禁用
- --o-color-link6: var(--o-color-kleinblue3); // 文字禁用，暂和一般禁用保持一致
+ --o-color-link1: var(--o-color-trafficpurple8); // 常规
+ --o-color-link2: var(--o-color-trafficpurple9); // 悬浮
+ --o-color-link3: var(--o-color-trafficpurple5); // 点击
+ --o-color-link4: var(--o-color-trafficpurple7); // 特殊场景
+ --o-color-link5: var(--o-color-trafficpurple3); // 一般禁用
+ --o-color-link6: var(--o-color-trafficpurple3); // 文字禁用，暂和一般禁用保持一致
// 边框颜色
--o-color-border1: var(--o-color-neutral9);
--o-color-border2: var(--o-color-neutral3);
- --o-color-border3: var(--o-color-kleinblue8);
+ --o-color-border3: var(--o-color-trafficpurple8);
// 分割线颜色
--o-color-division1: var(--o-color-neutral3);
@@ -72,4 +72,6 @@
--o-shadow-l3: 0 6px 18px rgba(0, 0, 0, 0.42); // SL3 三级投影，应用于一级投影上的卡片、组件等
--o-shadow-l4: 0 10px 32px rgba(0, 0, 0, 0.54); // SL4 覆盖阴影，应用于信息提示【tips、活动进入按钮等】等投影
--o-shadow-l5: 0 12px 42px rgba(0, 0, 0, 0.72); // SL5 弹出阴影，应用于模态弹窗投影
+
+ --o-color-fill6:0,0,0;
}
diff --git a/app/.vitepress/src/shared/utils.ts b/app/.vitepress/src/shared/utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ebd2cdd5b698787965c725c64a693144a6ea672d
--- /dev/null
+++ b/app/.vitepress/src/shared/utils.ts
@@ -0,0 +1,15 @@
+/**
+ * 是否是浏览器环境
+ * @returns boolean
+ */
+export function isBrowser(): boolean {
+ return typeof global === 'undefined';
+}
+
+
+
+
+
+
+
+
diff --git a/app/.vitepress/src/stores/common.ts b/app/.vitepress/src/stores/common.ts
deleted file mode 100644
index de323f09e36e9be0d81e2ebe380438cd9368349f..0000000000000000000000000000000000000000
--- a/app/.vitepress/src/stores/common.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { defineStore } from 'pinia';
-
-export const useCommon = defineStore('common', {
- state: () => ({
- theme: 'light',
- iconMenuShow: true,
- }),
-});
diff --git a/app/.vitepress/src/views/blogs/TheBlogs.vue b/app/.vitepress/src/views/blogs/TheBlogs.vue
index 2212f0ab92c79552f419c965c321647d756ee65b..f88edac14a48899919b9f01ca01cc95649a4d3a6 100644
--- a/app/.vitepress/src/views/blogs/TheBlogs.vue
+++ b/app/.vitepress/src/views/blogs/TheBlogs.vue
@@ -1,7 +1,487 @@
-
+
- 博客
+
+
+
+ {{ userCaseData.STRATEGY }}
+
+
+
+
+
+
+
+
+
+
+ {{ userCaseData.TIME }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ userCaseData.AUTHOR }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ userCaseData.TAGS }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.title }}
+
+ {{ item.summary }}
+
+ {{ tag }}
+
+
+
-
+
diff --git a/app/.vitepress/theme/index.ts b/app/.vitepress/theme/index.ts
index 8dc835f39c782e2c880600c25f2dae7196edea9c..0494512992900788ca94b11553222df2bbb2627c 100644
--- a/app/.vitepress/theme/index.ts
+++ b/app/.vitepress/theme/index.ts
@@ -1,15 +1,27 @@
import type { App } from 'vue';
import { createPinia } from 'pinia';
+import '@/shared/styles/element-plus/index.scss';
import '@/shared/styles/index.scss';
import Layout from '@/App.vue';
import NotFound from '@/NotFound.vue';
+import ElementPlus from 'element-plus';
+import OpenDesign from 'opendesign';
+import 'element-plus/theme-chalk/dark/css-vars.css';
+
export default {
Layout,
NotFound,
enhanceApp({ app }: { app: App }) {
+ if (typeof global !== 'undefined') {
+ // @ts-ignore
+ global.window = {};
+ }
app.use(createPinia());
+
+ app.use(ElementPlus);
+ app.use(OpenDesign);
},
};
diff --git a/app/vite.config.js b/app/vite.config.js
index f7d4950fdff49cccf2efb72e113a2419f7ad16e6..96ff955a8b966eda1ba05802d43a1bcc45a630c4 100644
--- a/app/vite.config.js
+++ b/app/vite.config.js
@@ -6,10 +6,7 @@ import Icons from 'unplugin-icons/vite';
import { FileSystemIconLoader } from 'unplugin-icons/loaders';
export default defineConfig({
- build: {
- outDir: path.resolve(__dirname, '../dist'),
- cssCodeSplit: true,
- },
+ build: {},
publicDir: path.resolve(__dirname, './.vitepress/public'),
resolve: {
alias: {
@@ -34,5 +31,4 @@ export default defineConfig({
},
}),
],
- server: {},
});
diff --git a/app/zh/blogs/default.png b/app/zh/blogs/default.png
deleted file mode 100644
index 70823878926531de19293cb21a7b135cd8f59798..0000000000000000000000000000000000000000
Binary files a/app/zh/blogs/default.png and /dev/null differ
diff --git "a/content/zh/post/laishenghao/2023_10_18_openGauss\345\237\272\344\272\2164\350\267\257\351\262\262\351\271\217\346\234\215\345\212\241\345\231\250\347\232\204\346\200\247\350\203\275\350\260\203\344\274\230.md" "b/content/zh/post/laishenghao/2023_10_18_openGauss\345\237\272\344\272\2164\350\267\257\351\262\262\351\271\217\346\234\215\345\212\241\345\231\250\347\232\204\346\200\247\350\203\275\350\260\203\344\274\230.md"
deleted file mode 100644
index 9a8668560b21d0c6a79ad5a45bcf4c35b35d0c28..0000000000000000000000000000000000000000
--- "a/content/zh/post/laishenghao/2023_10_18_openGauss\345\237\272\344\272\2164\350\267\257\351\262\262\351\271\217\346\234\215\345\212\241\345\231\250\347\232\204\346\200\247\350\203\275\350\260\203\344\274\230.md"
+++ /dev/null
@@ -1,938 +0,0 @@
-+++
-
-title = "openGauss基于4路鲲鹏服务器的性能调优"
-
-date = "2023-10-17"
-
-tags = ["性能调优", "TPCC", "openGauss"]
-
-archives = "2023-10"
-
-author = "laishenghao"
-
-summary = "openGauss基于4路鲲鹏服务器的性能调优"
-
-img = "/zh/post/laishenghao/title/opengauss.png"
-
-times = "19:00"
-
-+++
-
-# 1、概述
-本文主要描述了在4路鲲鹏服务器上，通过软硬件协同优化配置达到openGauss数据库的极致性能的方法。
-
-主要包括软硬件要求、BIOS配置、网卡配置、磁盘配置、服务器参数设置、数据库参数配置、绑核以及TPCC模型脚本优化等内容。
-
-## 1.1 硬件规格
-- **服务器：** TaiShan 200(Model 2480)
-- **CPU：** Kunpeng-920 ARM aarch64(4 Sockets * 64 Cores)
-- **内存：** 1TB
-- **网卡：** 万兆网卡Hi1822 Family(4*25GE)，时延 < 0.1ms
-- **磁盘：** NVME * 4，Model Number：HWE56P433T2M005N（V5 NVME卡）、HWE36P43016M000N（V3 NVME卡），其中V5 NVME卡 1MB顺序写带宽达到2600MB以上
-
-## 1.2 软件规格
-- **操作系统：** openEuler 20.03 (LTS)
-- **数据库软件：** openGauss 5.0.0 或其他更高Release版
-- **压测软件：** BenchmarkSQL-5.0
-
-# 2、服务器优化配置
-## 2.1 BIOS配置
-登录服务器管理系统，进入BIOS，进行以下配置，保存后重启：
-
-| 配置项 | 推荐值 | 菜单路径 | 说明 |
-| ----------------------------- | -------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| Support Smmu | Disabled | Advanced > MISC Config > Support Smmu | System Memory Management Unit |
-| CPU Prefetching Configuration | Disabled | Advanced > MISC Config > CPU Prefetching Configuration | CPU预取，推荐关闭 |
-| Die Interleaving | Disabled | Advanced > Memory Config > Die Interleaving | 控制是否使用DIE交织，推荐关闭 |
-| Max Payload Size | 512B | Advanced > PCIe Config > CPU X PCIe - Port X > Max Payload Size | 每次传输数据的最大单位，值越大带宽利用率越高。
其中X为具体的CPU编号 |
-
-
-## 2.2 磁盘配置
-
-本次调优中，需要用到4个 NVME 存储卡。分别用于存放 datanode 本身、xlog、2个比较大的表空间。其中用于存放 xlog 的为V5的NVME存储卡，容量3TB以上，其余为V3的NVME存储卡，容量1TB以上。
-
-在4p单机环境下，CPU更多，并发更大，单位时间内产生的数据量更大，IO很容易成为制约性能的瓶颈，所以在条件允许的情况下，应尽量使用V5的存储卡，V5的存储卡优先用于存放xlog文件。
-
-```shell
-df -h | grep nvme
-```
-
- 
-
-### 2.2.1 格式化文件系统
-
-查看 nvme 的文件系统类型，确认块大小是否为8KB（bsize=8192）。
-
-```shell
-# 如查看挂载在 /data4 路径下硬盘信息
-xfs_info /data4
-```
-
- 
-
-如果不是，则将其格式化为8KB（**格式化前注意数据备份**）。
-
-```shell
-umount /data4
-mkfs.xfs -b size=8192 /dev/nvme3n1 -f
-mount /dev/nvme3n1 /data4
-```
-
-操作完成后再次用 xfs_info 确认是否执行成功。
-
-### 2.2.2 配置磁盘IO队列调度机制
-
-```shell
-echo none > /sys/block/nvme0n1/queue/scheduler
-echo none > /sys/block/nvme1n1/queue/scheduler
-echo none > /sys/block/nvme2n1/queue/scheduler
-echo none > /sys/block/nvme3n1/queue/scheduler
-```
-
-## 2.3 网络配置
-
-进入[华为官网]( https://support.huawei.com/enterprise/zh/intelligent-accelerator-components/in500-solution-pid-23507369/software) ，选择对应的版本及补丁号，如 [IN500 solution 5.1.0.SPC401](https://support.huawei.com/enterprise/zh/intelligent-accelerator-components/in500-solution-pid-23507369/software/250968786) ，下载 [IN500_solution_5.1.0.SPC401.zip](https://support.huawei.com/enterprise/zh/software/250968786-ESW2000173161)
-
-安装hinicadm工具。
-
-以管理员身份执行以下命令：
-
-```shell
-mkdir IN500_solution_5.1.0
-export IN500_HOME=$(pwd)/IN500_solution_5.1.0
-unzip IN500_solution_5.1.0.SPC401.zip -d IN500_solution_5.1.0
-cd $IN500_HOME/tools/linux_arm/nic/
-rpm -ivh hinicadm-2.4.1.0-1.aarch64.rpm
-```
-
- 
-
-通过 ifconfig 命令查看使用的网络接口卡。
-
-```shell
-ifconfig
-```
-
-根据配置的ip确认网络接口卡名：enp71s0
-
- 
-
-查看Hi1822设备信息：
-
-```shell
-hinicadm info
-```
-
- 
-
-可以看到小网口 enp71s0 对应的物理网卡设备名为 hinic0。
-
-设置环境参数，以方便后续使用：
-
-```shell
-export CARD_NAME=enp71s0
-export HARD_DEV=hinic0
-```
-
-### 2.3.1 更换网卡固件
-
-1. 查看固件版本。
-
- ```shell
- ethtool -i $CARD_NAME
- ```
-
- 
-
-**firmware-version 为 2.4.1.0，则无需修改。否则如果是2.5.0.0，建议更换为2.4.1.0。**
-
-2. 更换固件步骤：
-
-* （2）更换固件。
-
- ```shell
- # 命令格式为：
- hinicadm updatefw -i <物理网卡设备名> -f <固件文件路径>
- # 例如：
- hinicadm updatefw -i $HARD_DEV -f $IN500_HOME/firmware/update_bin/cfg_data_nic_prd_1h_4x25G/Hi1822_nic_prd_1h_4x25G.bin
- ```
-
-* （3）重启服务器，确认firmware-version 是否为 2.4.1.0。
-
-### 2.3.2 设置中断队列
-
-* （1）查看当前网卡的中断队列配置
-
- IN500_solution_5.1.0支持设置最大中断数为16或64，在4P单机调优场景下，我们需要将中断数配置为24，所以需要将最大中断数配置为64。
-
- 通过以下命令查看当前的配置：
-
- ```shell
- ethtool -l $CARD_NAME
- ```
-
- 
-
-上图中第一个Combined值为网卡支持的最大中断数，第二个Combined值为当前网卡配置的中断数24。
-
-若配置已正确，则无需执行下列步骤，否则执行下列步骤进行修改。
-
-* （2）修改最大配置
-
- ```shell
- # 命令格式：
- $IN500_HOME/tools/linux_arm/nic/config/hinicconfig <物理网卡设备名> -f <多中断队列配置文件>
- # 例如：
- cd $IN500_HOME/tools/linux_arm/nic/config/
- ./hinicconfig $HARD_DEV -f ./std_sh_4x25ge_dpdk_cfg_template0.ini # 64中断，本文场景下执行此命令
- # ./hinicconfig $HARD_DEV -f ./std_sh_4x25ge_dpdk_cfg_template0.ini # 16中断
- ```
-
-
-
-* （3）修改当前配置
-
- ```shell
- ethtool -L $CARD_NAME combined 24
- ```
-
-* （4）再次执行步骤（1）进行配置确认。
-
-### 2.3.3 网络中断绑核
-
-在4路鲲鹏服务器中，共有8个NUMA节点、256核。将每个节点的最后3个核，共24个核用作网络中断，会有比较好的优化效果。
-
-使用以下命令查看CPU与node情况：
-
-```shell
-numactl -H
-```
-
- 
-
-中断绑核脚本如下：
-
-```shell
-export CARD_NAME=enp71s0
-
-irq_list=`cat /proc/interrupts | grep $CARD_NAME | awk {'print $1'} | tr -d ":"`
-irq_array_net=($irq_list)
-
-cpu_array_irq=(29 30 31 61 62 63 93 94 95 125 126 127 157 158 159 189 190 191 221 222 223 253 254 255)
-
-for (( i=0;i<24;i++ ))
-do
- echo "${cpu_array_irq[$i]}" > /proc/irq/${irq_array_net[$i]}/smp_affinity_list
-done
-
-for j in ${irq_array_net[@]}
-do
- cat /proc/irq/$j/smp_affinity_list
-done
-
-```
-
-将CARD_NAME改为实际值，保存为sh脚本bind_irq.sh 并执行完成中断绑定。
-
-```shell
-sh bind_irq.sh
-```
-
-### 2.3.4 修改网卡参数
-
-```shell
-ifconfig $CARD_NAME mtu 1500
-# 配置读写缓冲区
-ethtool -G $CARD_NAME rx 1024 tx 1024
-# 将网络分片offloading到网卡上
-ethtool –K $CARD_NAME tso on
-ethtool –K $CARD_NAME lro on
-ethtool –K $CARD_NAME gro on
-ethtool –K $CARD_NAME gso on
-```
-
-## 2.4 其他操作系统配置
-
-* 关闭不必要的服务
-
- ```shell
- service sysmonitor stop
- service irqbalance stop
- service rsyslog stop
- service firewalld stop
- ```
-
-* 关闭透明大页
-
- ```shell
- echo 'never' > /sys/kernel/mm/transparent_hugepage/defrag
- echo 'never' > /sys/kernel/mm/transparent_hugepage/enabled
- ```
-
-* 取消CPU平衡
-
- ```shell
- echo 0 > /proc/sys/kernel/numa_balancing
- ```
-
-* 调整内存脏页回收策略
-
- ```shell
- echo 3000 > /proc/sys/vm/dirty_expire_centisecs
- echo 500 > /proc/sys/vm/dirty_writeback_centisecs
- echo 60 > /proc/sys/vm/dirty_ratio
- echo 5 > /proc/sys/vm/dirty_background_ratio
- ```
-
-
-# 3、openGauss数据库配置
-
-## 3.1 数据库安装与环境变量配置
-
-（1）切换到数据库运行用户下（非root用户）。
-
-（2）创建文件：
-
-```shell
-vim ~/env.txt
-```
-
-配置如下环境变量（env.txt）：
-
-```shell
-export GAUSSHOME=/home/my_user/package # openGauss 的安装目录
-export LD_LIBRARY_PATH=$GAUSSHOME/lib
-export PATH=$GAUSSHOME/bin:$PATH
-export DATA_NODE=/xxx/data # 数据库节点路径
-export XLOG=xxx/pg_xlog # 存放xlog的路径
-export TABLESPACE2=xxx/tablespace2 # 表空间路径2
-export TABLESPACE3=xxx/tablespace3 # 表空间路径3
-export DATA_BACK=xxx/data_back # 数据备份路径
-```
-
-执行命令使环境变量生效
-
-```shell
-source ~/env.txt
-```
-
-**注意：**
-
-* DATA_NODE、XLOG、TABLESPACE2、TABLESPACE3 分别放到4个不同的 nvme 盘。
-* XLOG建议放到最好的 nvme 盘。
-* 以上路径不要同时存放其他数据，避免后续恢复数据时被删除。
-
-（3）安装数据库
-
-从 [openGauss官网](https://opengauss.org/zh/download/) 下载安装包，按官网文档进行安装到 $GAUSSHOME 路径。
-
-安装好后，初始化数据库节点到 $DATA_NODE 路径下。
-
-## 3.1 修改pg_hpa.conf
-
-在文件末尾增加以下内容，
-
-```properties
-host tpcc1000 tpcc_bot xxx.xxx.xxx.xxx/32 sha256
-```
-
-其中，
-
-* tpcc1000 为后面创建的数据库名。
-* tpcc_bot 为后面创建的数据库用户名。
-* xxx.xxx.xxx.xxx 改为benchmark压测服务器的IP。
-
-## 3.2 修改postgersql.conf
-
-本节列举openGauss的主要GUC参数配置。主要注意事项如下：
-
-* 在极限性能场景下，关闭用于调试等的无关功能。
-
-* 打开 synchronous_commit、fsync参数保障数据安全落盘。
-
-* 开启线程池，使用绑核配置。绑核编号中除去用于网络中断的核以及用于处理xlog的核。
-
- enable_thread_pool = on
- thread_pool_attr = '696,8,(cpubind:1-28,32-60,64-92,96-124,128-156,160-188,192-220,224-252)'
-
-* xlog落盘压力较大，相关线程单独绑核。
-
-* xlog生成速率非常大，调整回收相关参数加快回收速率。
-
-* 打开autovacuum。
-
-* listen_addresses、port需要根据实际情况进行修改。
-
-* wal_file_init_num 在生成数据阶段使用30，在跑TPCC阶段改为60000。
-
-参考配置如下，参数具体含义可以在[openGauss官网](https://opengauss.org)查阅：
-
-```properties
-max_connections = 4096
-allow_concurrent_tuple_update = true
-audit_enabled = off
-cstore_buffers =16MB
-enable_alarm = off
-enable_codegen = false
-enable_data_replicate = off
-full_page_writes = off
-max_files_per_process = 100000
-max_prepared_transactions = 2048
-use_workload_manager = off
-wal_buffers = 1GB
-work_mem = 1MB
-transaction_isolation = 'read committed'
-default_transaction_isolation = 'read committed'
-synchronous_commit = on
-fsync = on
-maintenance_work_mem = 2GB
-autovacuum = on
-autovacuum_mode = vacuum
-autovacuum_vacuum_cost_delay =10
-update_lockwait_timeout =20min
-enable_mergejoin = off
-enable_nestloop = off
-enable_hashjoin = off
-enable_bitmapscan = on
-enable_material = off
-wal_log_hints = off
-log_duration = off
-checkpoint_timeout = 15min
-autovacuum_vacuum_scale_factor = 0.1
-autovacuum_analyze_scale_factor = 0.02
-enable_save_datachanged_timestamp =FALSE
-log_timezone = 'PRC'
-timezone = 'PRC'
-lc_messages = 'C'
-lc_monetary = 'C'
-lc_numeric = 'C'
-lc_time = 'C'
-enable_double_write = on
-enable_incremental_checkpoint = on
-enable_opfusion = on
-numa_distribute_mode = 'all'
-track_activities = off
-enable_instr_track_wait = off
-enable_instr_rt_percentile = off
-track_sql_count = off
-enable_instr_cpu_timer = off
-plog_merge_age = 0
-session_timeout = 0
-enable_instance_metric_persistent = off
-enable_logical_io_statistics = off
-enable_user_metric_persistent =off
-enable_xlog_prune = off
-enable_resource_track = off
-enable_thread_pool = on
-thread_pool_attr = '696,8,(cpubind:1-28,32-60,64-92,96-124,128-156,160-188,192-220,224-252)'
-enable_partition_opfusion=on
-dirty_page_percent_max = 0.1
-candidate_buf_percent_target = 0.7
-checkpoint_segments =10240
-advance_xlog_file_num = 100
-autovacuum_max_workers = 20
-autovacuum_naptime = 5s
-bgwriter_flush_after = 256kB
-data_replicate_buffer_size = 16MB
-enable_stmt_track = off
-remote_read_mode=non_authentication
-wal_level = archive
-hot_standby = off
-hot_standby_feedback = off
-client_min_messages = ERROR
-log_min_messages = FATAL
-enable_asp = off
-enable_bbox_dump = off
-enable_ffic_log = off
-wal_keep_segments = 1025
-wal_writer_delay = 100
-local_syscache_threshold = 40MB
-sql_beta_feature = 'partition_opfusion'
-pagewriter_thread_num = 2
-max_redo_log_size=400GB
-walwriter_cpu_bind = 0
-undo_zone_count=0
-gs_clean_timeout =0
-pagewriter_sleep = 30
-incremental_checkpoint_timeout=5min
-xloginsert_locks=8
-walwriter_sleep_threshold = 50000
-log_hostname = off
-vacuum_cost_limit = 10000
-instr_unique_sql_count=0
-track_counts = on
-bgwriter_flush_after = 32
-enable_seqscan = off
-enable_beta_opfusion=on
-enable_global_syscache=off
-enable_ustore = off
-enable_cachedplan_mgr=off
-shared_buffers = 450GB
-enable_page_lsn_check = off
-max_io_capacity = 4GB
-light_comm = on
-enable_indexscan_optimization = on
-time_record_level = 1
-listen_addresses = '?'
-port = ?
-bgwriter_delay = 1s
-checkpoint_segments=10000
-# 在生成数据阶段使用30，在跑TPCC阶段改为60000
-wal_file_init_num = 30
-# wal_file_init_num = 60000
-```
-
-
-## 3.3 创建压测数据库
-
-（1）用绑核方式启动
-
--C参数指定绑核列表，参数与openGauss的线程池绑定参数一致。
-
-```shell
-numactl -C 1-28,32-60,64-92,96-124,128-156,160-188,192-220,224-252 gs_ctl start -D $datadir -Z single_node
-```
-
-（2）创建数据库
-
-登录数据库，创建用于压测的用户及数据库。
-
-注意与前面在pg_hba.conf配置的参数保持一致。
-
-```sql
-create user tpcc_bot with sysadmin identified by 'my_password@123';
-create database tpcc1000 encoding='UTF-8' owner=tpcc_bot;
-```
-
-完成后退出登录。
-
-# 4、Benchmark配置
-
-## 4.1 Benchmark 运行环境
-
-用于运行Benchmark压测的服务器不需要很高的配置，只要保证不会成为瓶颈点即可。
-
-本文所使用的客户端服务器配置为2Taishan 200服务器，CPU为Kunpeng-920 ARM aarch64（2socket*64core），内存765GB。
-
-系统配置部分可以参考第二节《服务器优化配置》进行配置，其中中断配置推荐为：最大中断数设置为64，使用中断数设置为48。
-
-Benchmark-sql-5.0软件的安装可以参考 [此文](https://opengauss.org/zh/blogs/optimize/opengauss-tpcc.html) ，本文不再赘述。
-
-## 4.2 修改数据生成脚本
-
-安装好Benchmark-sql-5.0后，进入运行路径 benchmarksql-5.0/run。
-
-* （1）修改 sql.common/tableCreates.sql，组要修改如下：
-
- * 增加2个表空间，bmsql_customer分配到 example2，bmsql_stock分配到 example3。
-
- * 删除无用序列 bmsql_hist_id_seq。
-
- * 修改表创建语句，给主要的表增加 FACTOR属性。
- * 增加分区设置。
-
- 具体如下：
-
- ```sql
- CREATE TABLESPACE example2 relative location 'tablespace2';
- CREATE TABLESPACE example3 relative location 'tablespace3';
-
- create table bmsql_config (
- cfg_name varchar(30),
- cfg_value varchar(50)
- );
-
- create table bmsql_warehouse (
- w_id integer not null,
- w_ytd decimal(20,2),
- w_tax decimal(4,4),
- w_name varchar(10),
- w_street_1 varchar(20),
- w_street_2 varchar(20),
- w_city varchar(20),
- w_state char(2),
- w_zip char(9)
- ) WITH (FILLFACTOR=80);
-
- create table bmsql_district (
- d_w_id integer not null,
- d_id integer not null,
- d_ytd decimal(20,2),
- d_tax decimal(4,4),
- d_next_o_id integer,
- d_name varchar(10),
- d_street_1 varchar(20),
- d_street_2 varchar(20),
- d_city varchar(20),
- d_state char(2),
- d_zip char(9)
- ) WITH (FILLFACTOR=80);
-
- create table bmsql_customer (
- c_w_id integer not null,
- c_d_id integer not null,
- c_id integer not null,
- c_discount decimal(4,4),
- c_credit char(2),
- c_last varchar(16),
- c_first varchar(16),
- c_credit_lim decimal(12,2),
- c_balance decimal(12,2),
- c_ytd_payment decimal(12,2),
- c_payment_cnt integer,
- c_delivery_cnt integer,
- c_street_1 varchar(20),
- c_street_2 varchar(20),
- c_city varchar(20),
- c_state char(2),
- c_zip char(9),
- c_phone char(16),
- c_since timestamp,
- c_middle char(2),
- c_data varchar(500)
- ) WITH (FILLFACTOR=80) tablespace example2;
-
- -- create sequence bmsql_hist_id_seq;
-
- create table bmsql_history (
- hist_id integer,
- h_c_id integer,
- h_c_d_id integer,
- h_c_w_id integer,
- h_d_id integer,
- h_w_id integer,
- h_date timestamp,
- h_amount decimal(6,2),
- h_data varchar(24)
- ) WITH (FILLFACTOR=80);
-
- create table bmsql_new_order (
- no_w_id integer not null,
- no_d_id integer not null,
- no_o_id integer not null
- ) WITH (FILLFACTOR=80);
-
- create table bmsql_oorder (
- o_w_id integer not null,
- o_d_id integer not null,
- o_id integer not null,
- o_c_id integer,
- o_carrier_id integer,
- o_ol_cnt integer,
- o_all_local integer,
- o_entry_d timestamp
- ) WITH (FILLFACTOR=80);
-
- create table bmsql_order_line (
- ol_w_id integer not null,
- ol_d_id integer not null,
- ol_o_id integer not null,
- ol_number integer not null,
- ol_i_id integer not null,
- ol_delivery_d timestamp,
- ol_amount decimal(6,2),
- ol_supply_w_id integer,
- ol_quantity integer,
- ol_dist_info char(24)
- ) WITH (FILLFACTOR=80) tablespace example2
- partition by RANGE(ol_w_id)
- (
- partition bmsql_order_line_p1 values less than (126),
- partition bmsql_order_line_p2 values less than (251),
- partition bmsql_order_line_p3 values less than (376),
- partition bmsql_order_line_p4 values less than (501),
- partition bmsql_order_line_p5 values less than (626),
- partition bmsql_order_line_p6 values less than (751),
- partition bmsql_order_line_p7 values less than (876),
- partition bmsql_order_line_p8 values less than (1001)
- );
-
-
- create table bmsql_item (
- i_id integer not null,
- i_name varchar(24),
- i_price decimal(5,2),
- i_data varchar(50),
- i_im_id integer
- );
-
- create table bmsql_stock (
- s_w_id integer not null,
- s_i_id integer not null,
- s_quantity integer,
- s_ytd integer,
- s_order_cnt integer,
- s_remote_cnt integer,
- s_data varchar(50),
- s_dist_01 char(24),
- s_dist_02 char(24),
- s_dist_03 char(24),
- s_dist_04 char(24),
- s_dist_05 char(24),
- s_dist_06 char(24),
- s_dist_07 char(24),
- s_dist_08 char(24),
- s_dist_09 char(24),
- s_dist_10 char(24)
- ) WITH (FILLFACTOR=80) tablespace example3
- partition by RANGE(s_w_id)
- (
- partition bmsql_stock_p1 values less than (126),
- partition bmsql_stock_p2 values less than (251),
- partition bmsql_stock_p3 values less than (376),
- partition bmsql_stock_p4 values less than (501),
- partition bmsql_stock_p5 values less than (626),
- partition bmsql_stock_p6 values less than (751),
- partition bmsql_stock_p7 values less than (876),
- partition bmsql_stock_p8 values less than (1001)
- );
-
- ```
-
-
-* （2）修改 sql.common/indexCreates.sql，改为如下：
-
- ```sql
- alter table bmsql_warehouse add constraint bmsql_warehouse_pkey
- primary key (w_id);
-
- alter table bmsql_district add constraint bmsql_district_pkey
- primary key (d_w_id, d_id);
-
- alter table bmsql_customer add constraint bmsql_customer_pkey
- primary key (c_w_id, c_d_id, c_id);
-
- create index bmsql_customer_idx1
- on bmsql_customer (c_w_id, c_d_id, c_last, c_first);
-
- alter table bmsql_oorder add constraint bmsql_oorder_pkey
- primary key (o_w_id, o_d_id, o_id);
-
- create index bmsql_oorder_idx1
- on bmsql_oorder (o_w_id, o_d_id, o_c_id);
-
- alter table bmsql_new_order add constraint bmsql_new_order_pkey
- primary key (no_w_id, no_d_id, no_o_id) using index tablespace example2;
-
- alter table bmsql_order_line add constraint bmsql_order_line_pkey
- primary key (ol_w_id, ol_d_id, ol_o_id, ol_number);
-
- alter table bmsql_stock add constraint bmsql_stock_pkey
- primary key (s_w_id, s_i_id);
-
- alter table bmsql_item add constraint bmsql_item_pkey
- primary key (i_id);
- ```
-
-
-
-* （3）修改数据生成脚本 runDatabaseBuild.sh，具体如下：
-
- ```shell
- #!/bin/sh
- Cwd=`cd $(dirname $0);pwd`
- if [ $# -lt 1 ] ; then
- echo "usage: $(basename $0) PROPS [OPT VAL [...]]" >&2
- exit 2
- fi
-
- PROPS="$1"
- shift
- if [ ! -f "${PROPS}" ] ; then
- echo "${PROPS}: no such file or directory" >&2
- exit 1
- fi
- DB="$(grep '^db=' $PROPS | sed -e 's/^db=//')"
-
- BEFORE_LOAD="tableCreates_4p"
- #AFTER_LOAD="indexCreates foreignKeys extraHistID buildFinish"
- AFTER_LOAD="indexCreates buildFinish"
-
- for step in ${BEFORE_LOAD} ; do
- $Cwd/runSQL.sh "${PROPS}" $step
- done
-
- $Cwd/runLoader.sh "${PROPS}" $*
-
- for step in ${AFTER_LOAD} ; do
- $Cwd/runSQL.sh "${PROPS}" $step
- done
- ```
-
-## 4.3 运行参数配置
-
- 进入路径 benchmarksql-5.0/run，复制一份配置文件并修改props_4p_5min.og，作为预热5分钟时使用。
-
- ```shell
- cp props.pg props_4p_5min.og
- vim props_4p_5min.og
- ```
-
- props_4p_5min.og：将ip、port、my_db_user_name、my_db_user_name改为实际值。
-
- ```properties
- db=postgres
- driver=org.postgresql.Driver
- conn=jdbc:postgresql://ip:port/tpcc1000?prepareThreshold=1&batchMode=on&fetchsize=10&loggerLevel=OFF
- user=my_db_user_name
- password=******
-
- warehouses=1000
- loadWorkers=80
-
- terminals=812
- //To run specified transactions per terminal- runMins must equal zero
- runTxnsPerTerminal=0
- //To run for specified minutes- runTxnsPerTerminal must equal zero
- runMins=5
- //Number of total transactions per minute
- limitTxnsPerMin=0
-
- //Set to true to run in 4.x compatible mode. Set to false to use the
- //entire configured database evenly.
- terminalWarehouseFixed=false
-
- //The following five values must add up to 100
- //The default percentages of 45, 43, 4, 4 & 4 match the TPC-C spec
- newOrderWeight=45
- paymentWeight=43
- orderStatusWeight=4
- deliveryWeight=4
- stockLevelWeight=4
-
- ```
-
- 修改完成后保存，再复制一份为 props_4p_60min.og，并将 runMins 的值改为60，作为跑1小时TPCC使用。
-
- ```shell
- cp props_4p_5min.og props_4p_60min.og
- vim props_4p_60min.og
- ```
-
- ```properties
- db=postgres
- driver=org.postgresql.Driver
- conn=jdbc:postgresql://ip:port/tpcc1000?prepareThreshold=1&batchMode=on&fetchsize=10&loggerLevel=OFF
- user=my_db_user_name
- password=******
-
- warehouses=1000
- loadWorkers=80
-
- terminals=812
- //To run specified transactions per terminal- runMins must equal zero
- runTxnsPerTerminal=0
- //To run for specified minutes- runTxnsPerTerminal must equal zero
- runMins=60
- //Number of total transactions per minute
- limitTxnsPerMin=0
-
- //Set to true to run in 4.x compatible mode. Set to false to use the
- //entire configured database evenly.
- terminalWarehouseFixed=false
-
- //The following five values must add up to 100
- //The default percentages of 45, 43, 4, 4 & 4 match the TPC-C spec
- newOrderWeight=45
- paymentWeight=43
- orderStatusWeight=4
- deliveryWeight=4
- stockLevelWeight=4
-
- ```
-
-# 5、压测
-
-## 5.1 数据生成
-
-进入benchmark的run目录下，执行以下命令生成数据：
-
-```shell
-numactl -C 0-19,32-51,64-83,96-115 ./runDatabaseBuild.sh props_4p_5min.og
-```
-
-任务结束后，待数据全部落盘，stop数据库。
-
-将postgresql.conf 的 wal_file_init_num 参数改为 60000。
-
-```shell
-echo "wal_file_init_num = 60000" >> $DATA_NODE/postgresql.conf
-```
-
-## 5.2 数据备份
-
-```shell
-cp -r $DATA_NODE $DATA_BACK
-```
-
-## 5.3 数据分盘
-
-```shell
-mv $DATA_NODE/pg_xlog $XLOG
-mv $DATA_NODE/pg_location/tablespace2 $TABLESPACE2
-mv $DATA_NODE/pg_location/tablespace3 $TABLESPACE3
-
-ln -svf $XLOG $DATA_NODE/pg_xlog
-ln -svf $TABLESPACE2 $DATA_NODE/pg_location/tablespace2
-ln -svf $TABLESPACE3 $DATA_NODE/pg_location/tablespace3
-```
-
-## 5.4 以preferred方式绑核启动
-
-（1）查看xlog盘对应的NUMA节点
-
-例如 xlog 对应nvme0，则使用如下命令查看：
-
-```shell
-cat /sys/class/nvme/nvme0/device/numa_node
-```
-
- 
-
-如上图所示，结果为0，说明xlog盘对应的NUMA节点为0节点。
-
-（2）绑核启动
-
-通过以下命令启动openGauss数据库。
-
-```shell
-numactl -C 1-28,32-60,64-92,96-124,128-156,160-188,192-220,224-252 --preferred=0 gs_ctl start -D $datadir -Z single_node
-```
-
-其中，
-
-* -C参数为绑核参数，参数与openGauss的线程池绑定列表一致。
-* -p或--preferred参数为设置内存分配优先分配到 node 0 节点。
-
-数据库启动成功后，通过以下命令查看numa的节点内存分配，将可以看到，node 0 剩余的内存是比其他节点要少的，说明preferred参数配置生效，否则没有生效，可能会导致在不同的测试次数中大幅波动。
-
- 
-
-## 5.5 预热
-
-在压测端执行以下命令进行5分钟预热：
-
-```shell
-numactl -C 0-19,32-51,64-83,96-115 ./runBenchmark.sh props_4p_5min.og
-```
-
-通过htop命令查看CPU情况，前面几分钟如下则正常，后面几分钟由于在初始化xlog文件，会下降到60%左右，属于正常现象。
-
- 
-
-预热5分钟 TPCC约为185万。
-
- 
-
-## 5.6正式压测
-
-预热5分钟结束再过10分钟，执行以下命令正式压测，最终TPCC达到230万以上。
-
-```shell
-numactl -C 0-19,32-51,64-83,96-115 ./runBenchmark.sh props_4p_60min.og
-```
-
- 
-
- 
-
diff --git a/content/zh/post/laishenghao/figures/20231017/image-1.png b/content/zh/post/laishenghao/figures/20231017/image-1.png
deleted file mode 100644
index 6e2aba71e1139b7cb439073d149650954f729580..0000000000000000000000000000000000000000
Binary files a/content/zh/post/laishenghao/figures/20231017/image-1.png and /dev/null differ
diff --git a/content/zh/post/laishenghao/figures/20231017/image-10.png b/content/zh/post/laishenghao/figures/20231017/image-10.png
deleted file mode 100644
index c0a6e9fbbc9b7ff33c597c0ddfc0eb2aed811677..0000000000000000000000000000000000000000
Binary files a/content/zh/post/laishenghao/figures/20231017/image-10.png and /dev/null differ
diff --git a/content/zh/post/laishenghao/figures/20231017/image-11.png b/content/zh/post/laishenghao/figures/20231017/image-11.png
deleted file mode 100644
index 68228006a60cf790e1eac8b623af7ac956a39129..0000000000000000000000000000000000000000
Binary files a/content/zh/post/laishenghao/figures/20231017/image-11.png and /dev/null differ
diff --git a/content/zh/post/laishenghao/figures/20231017/image-12.png b/content/zh/post/laishenghao/figures/20231017/image-12.png
deleted file mode 100644
index 19900b47de92a966be66c40eb820cc5ce1621a71..0000000000000000000000000000000000000000
Binary files a/content/zh/post/laishenghao/figures/20231017/image-12.png and /dev/null differ
diff --git a/content/zh/post/laishenghao/figures/20231017/image-13.png b/content/zh/post/laishenghao/figures/20231017/image-13.png
deleted file mode 100644
index e3473c4fe1a3acb20e220a90d9384f08a0edd323..0000000000000000000000000000000000000000
Binary files a/content/zh/post/laishenghao/figures/20231017/image-13.png and /dev/null differ
diff --git a/content/zh/post/laishenghao/figures/20231017/image-14.png b/content/zh/post/laishenghao/figures/20231017/image-14.png
deleted file mode 100644
index 7b5d3160eeeec6c014c2e635cc167cdce998fc24..0000000000000000000000000000000000000000
Binary files a/content/zh/post/laishenghao/figures/20231017/image-14.png and /dev/null differ
diff --git a/content/zh/post/laishenghao/figures/20231017/image-2.png b/content/zh/post/laishenghao/figures/20231017/image-2.png
deleted file mode 100644
index 0a3651d551f38ba90befd9429849d6c8e0d93fc2..0000000000000000000000000000000000000000
Binary files a/content/zh/post/laishenghao/figures/20231017/image-2.png and /dev/null differ
diff --git a/content/zh/post/laishenghao/figures/20231017/image-3.png b/content/zh/post/laishenghao/figures/20231017/image-3.png
deleted file mode 100644
index b93b319590d3af56ab2f7e198757881051b133bd..0000000000000000000000000000000000000000
Binary files a/content/zh/post/laishenghao/figures/20231017/image-3.png and /dev/null differ
diff --git a/content/zh/post/laishenghao/figures/20231017/image-4.png b/content/zh/post/laishenghao/figures/20231017/image-4.png
deleted file mode 100644
index 593b4d8d413a6a80510e68a428fc25feb2fe8b1d..0000000000000000000000000000000000000000
Binary files a/content/zh/post/laishenghao/figures/20231017/image-4.png and /dev/null differ
diff --git a/content/zh/post/laishenghao/figures/20231017/image-5.png b/content/zh/post/laishenghao/figures/20231017/image-5.png
deleted file mode 100644
index fe1a43169ce78c2b47c6dd4876faec2304d92a5a..0000000000000000000000000000000000000000
Binary files a/content/zh/post/laishenghao/figures/20231017/image-5.png and /dev/null differ
diff --git a/content/zh/post/laishenghao/figures/20231017/image-6.png b/content/zh/post/laishenghao/figures/20231017/image-6.png
deleted file mode 100644
index 1eda725d3d2cd6bae70ca50fe4ed5e5e0d485576..0000000000000000000000000000000000000000
Binary files a/content/zh/post/laishenghao/figures/20231017/image-6.png and /dev/null differ
diff --git a/content/zh/post/laishenghao/figures/20231017/image-7.png b/content/zh/post/laishenghao/figures/20231017/image-7.png
deleted file mode 100644
index c4018f750c4973a85dcc01c91981965957ebcc58..0000000000000000000000000000000000000000
Binary files a/content/zh/post/laishenghao/figures/20231017/image-7.png and /dev/null differ
diff --git a/content/zh/post/laishenghao/figures/20231017/image-8.png b/content/zh/post/laishenghao/figures/20231017/image-8.png
deleted file mode 100644
index 70f0b4eebe4974d81238b453093c497827df26c0..0000000000000000000000000000000000000000
Binary files a/content/zh/post/laishenghao/figures/20231017/image-8.png and /dev/null differ
diff --git a/content/zh/post/laishenghao/figures/20231017/image-9.png b/content/zh/post/laishenghao/figures/20231017/image-9.png
deleted file mode 100644
index 8069b84840a7bef858aa63923f87fcd5c7b52cbf..0000000000000000000000000000000000000000
Binary files a/content/zh/post/laishenghao/figures/20231017/image-9.png and /dev/null differ
diff --git a/content/zh/post/laishenghao/title/opengauss.png b/content/zh/post/laishenghao/title/opengauss.png
deleted file mode 100644
index 9daa81898c8dd392fdde9f3ff6aa590a3dbf1490..0000000000000000000000000000000000000000
Binary files a/content/zh/post/laishenghao/title/opengauss.png and /dev/null differ
diff --git a/deploy/nginx/nginx.conf b/deploy/nginx/nginx.conf
index a938f530cc30a0a92039e3bf7953b7b08207bfe1..79ee45e0a0cbd0b1ae648be6cd3c7391f0b47090 100644
--- a/deploy/nginx/nginx.conf
+++ b/deploy/nginx/nginx.conf
@@ -53,11 +53,7 @@ http {
gzip_vary on;
server {
- # listen 443 ssl;
- # server_name localhost;
- # charset utf-8;
-
- listen 80;
+ listen 8080;
charset utf-8;
limit_conn perserver 50;
if ($request_method = 'OPTIONS') {
@@ -77,6 +73,7 @@ http {
location / {
add_header Cache-Control no-cache;
}
+
root /usr/share/nginx/html;
index index.html;
# error_page 404 /404.html;
diff --git a/opendesign/_utils/common.ts b/opendesign/_utils/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9a855ca113fa95661ac5d37d6055c00b344b1b78
--- /dev/null
+++ b/opendesign/_utils/common.ts
@@ -0,0 +1 @@
+export type SizeType = 'large' | 'medium' | 'small' | 'mini';
diff --git a/opendesign/button/index.ts b/opendesign/button/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ad4db8f068b84568642b64a13383a711c830fa23
--- /dev/null
+++ b/opendesign/button/index.ts
@@ -0,0 +1,8 @@
+import type { App } from 'vue';
+import Button from './src/button';
+
+Button.install = function (app: App) {
+ app.component(Button.name, Button);
+};
+
+export { Button };
diff --git a/opendesign/button/src/button-types.ts b/opendesign/button/src/button-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..de428912b68fdffa012aa8b5af43363de270580e
--- /dev/null
+++ b/opendesign/button/src/button-types.ts
@@ -0,0 +1,36 @@
+import { ExtractDefaultPropTypes, PropType } from 'vue';
+import { SizeType } from '../../_utils/common';
+
+type ButtonType = 'outline' | 'primary' | 'secondary' | 'text';
+// TODO:status颜色规范待补充
+type ButtonStatus = 'normal';
+type ButtonNativeType = 'button' | 'submit' | 'reset';
+
+export const buttonProps = {
+ size: {
+ type: String as PropType
,
+ default: 'medium',
+ },
+ type: {
+ type: String as PropType,
+ default: 'outline',
+ },
+ status: {
+ type: String as PropType,
+ default: 'nomral',
+ },
+ disabled: {
+ type: Boolean,
+ default: false,
+ },
+ animation: {
+ type: Boolean,
+ default: false,
+ },
+ nativeType: {
+ type: String as PropType,
+ default: 'button',
+ },
+};
+
+export type ButtonProps = ExtractDefaultPropTypes;
diff --git a/opendesign/button/src/button.scss b/opendesign/button/src/button.scss
new file mode 100644
index 0000000000000000000000000000000000000000..10c5df37a5e0e1ac6582a098e7778a31ac1bf9dc
--- /dev/null
+++ b/opendesign/button/src/button.scss
@@ -0,0 +1,195 @@
+@import './var.scss';
+
+.o-button {
+ display: inline-flex;
+ align-items: center;
+ padding: var(--o-button-padding);
+ font-size: var(--o-button-font-size);
+ line-height: var(--o-button-line-height);
+ color: var(--o-button-font-color);
+ background-color: var(--o-button-bg-color);
+ border: var(--o-button-border);
+ outline: none;
+ user-select: none;
+ cursor: pointer;
+
+ &.with-prefix {
+ padding-left: var(--o-button-icon-paddding);
+ }
+
+ &.with-suffix {
+ padding-right: var(--o-button-icon-paddding);
+ }
+
+ &.is-disabled {
+ cursor: not-allowed;
+ }
+
+ &:hover {
+ @media screen and (min-width: 1100px) {
+ color: var(--o-button-font-color_hover);
+ border: var(--o-button-border_hover);
+ background-color: var(--o-button-bg-color_hover);
+ }
+ }
+ &:active {
+ @media screen and (min-width: 1100px) {
+ color: var(--o-button-font-color_active);
+ background-color: var(--o-button-bg-color_active);
+ border: var(--o-button-border_active);
+ }
+ }
+ &.is-disabled {
+ color: var(--o-button-font-color_disabled);
+ border: var(--o-button-border_disabled);
+ background-color: var(--o-button-bg-color_disabled);
+ }
+
+ //primary
+ &.o-button-type-primary {
+ color: var(--o-button-font-color-primary);
+ border: var(--o-button-border-primary);
+ background-color: var(--o-button-bg-color-primary);
+
+ &:hover {
+ @media screen and (min-width: 1100px) {
+ border: var(--o-button-border-primary_hover);
+ background-color: var(--o-button-bg-color-primary_hover);
+ }
+ }
+ &:active {
+ @media screen and (min-width: 1100px) {
+ border: var(--o-button-border-primary_active);
+ background-color: var(--o-button-bg-color-primary_active);
+ }
+ }
+ }
+ &.o-button-type-primary.is-disabled {
+ color: var(--o-button-font-color-primary_disabled);
+ border: var(--o-button-border-primary_disabled);
+ background-color: var(--o-button-bg-color-primary_disabled);
+ }
+
+ // secondary
+ &.o-button-type-secondary {
+ color: var(--o-button-font-color-secondary);
+ border: var(--o-button-border-secondary);
+ background-color: var(--o-button-bg-color-secondary);
+ &:hover {
+ border: var(--o-button-border-secondary_hover);
+ background-color: var(--o-button-bg-color-secondary_hover);
+ }
+ &:active {
+ border: var(--o-button-border-secondary_active);
+ background-color: var(--o-button-bg-color-secondary_active);
+ }
+ }
+ &.o-button-type-secondary.is-disabled {
+ color: var(--o-button-font-color-secondary_disabled);
+ border: var(--o-button-border-secondary_disabled);
+ background-color: var(--o-button-bg-color-secondary_disabled);
+ }
+
+ // text
+ &.o-button-type-text {
+ color: var(--o-button-font-color-text);
+ border: var(--o-button-border-text);
+ background-color: var(--o-button-bg-color-text);
+ &:hover {
+ // border: var(--o-button-border-text_hover);
+ // background-color: var(--o-button-bg-color-text_hover);
+ }
+ &:active {
+ // border: var(--o-button-border-text_active);
+ // background-color: var(--o-button-bg-color-text_active);
+ }
+ }
+ &.o-button-type-text.is-disabled {
+ color: var(--o-button-font-color-text_disabled);
+ border: var(--o-button-border-text_disabled);
+ background-color: var(--o-button-bg-color-text_disabled);
+ }
+
+ .prefix-icon {
+ display: inline-flex;
+ align-items: center;
+ margin-right: var(--o-button-icon-margin);
+ font-size: var(--o-button-icon-font-size);
+ transition: all 0.2s linear;
+ }
+
+ .suffix-icon {
+ display: inline-flex;
+ align-items: center;
+ margin-left: var(--o-button-icon-margin);
+ font-size: var(--o-button-icon-font-size);
+ transition: all 0.2s linear;
+ }
+
+ &.animation:hover .prefix-icon {
+ @media screen and (min-width: 1100px) {
+ transform: translate(-4px);
+ }
+ }
+
+ &.animation:hover .suffix-icon {
+ @media screen and (min-width: 1100px) {
+ transform: translate(4px);
+ }
+ }
+
+ &.o-button-size-small {
+ padding: var(--o-button-padding-small);
+ font-size: var(--o-button-font-size-small);
+ line-height: var(--o-button-line-height-small);
+ &.with-prefix {
+ padding-left: var(--o-button-icon-paddding-small);
+ }
+
+ &.with-suffix {
+ padding-right: var(--o-button-icon-paddding-small);
+ }
+
+ .prefix-icon {
+ margin-right: var(--o-button-icon-margin-small);
+ font-size: var(--o-button-icon-font-size-small);
+ }
+
+ .suffix-icon {
+ margin-left: var(--o-button-icon-margin-small);
+ font-size: var(--o-button-icon-font-size-small);
+ svg {
+ width: var(--o-button-icon-font-size-small);
+ height: var(--o-button-icon-font-size-small);
+ }
+ }
+ }
+
+ &.o-button-size-mini {
+ padding: var(--o-button-padding-mini);
+ font-size: var(--o-button-font-size-mini);
+ line-height: var(--o-button-line-height-mini);
+
+ &.with-prefix {
+ padding-left: var(--o-button-icon-paddding-mini);
+ }
+
+ &.with-suffix {
+ padding-right: var(--o-button-icon-paddding-mini);
+ }
+
+ .prefix-icon {
+ margin-right: var(--o-button-icon-margin-mini);
+ font-size: var(--o-button-icon-font-size-mini);
+ }
+
+ .suffix-icon {
+ margin-left: var(--o-button-icon-margin-mini);
+ font-size: var(--o-button-icon-font-size-mini);
+ svg {
+ width: var(--o-button-icon-font-size-mini);
+ height: var(--o-button-icon-font-size-mini);
+ }
+ }
+ }
+}
diff --git a/opendesign/button/src/button.tsx b/opendesign/button/src/button.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..116b113634e9c4d8da7aa149b1f0b4d0ebc15705
--- /dev/null
+++ b/opendesign/button/src/button.tsx
@@ -0,0 +1,46 @@
+import { computed, defineComponent, toRefs } from 'vue';
+import { buttonProps, ButtonProps } from './button-types';
+import './button.scss';
+
+export default defineComponent({
+ name: 'OButton',
+ props: buttonProps,
+ emits: ['click'],
+ setup(props: ButtonProps, { emit, slots }) {
+ const { size, type, status, disabled, animation, nativeType } =
+ toRefs(props);
+
+ const classNames = computed(() => ({
+ 'o-button': true,
+ [`o-button-size-${size.value}`]: true,
+ [`o-button-type-${type.value}`]: true,
+ [`o-button-status-${status.value}`]: true,
+ 'with-prefix': slots.prefixIcon,
+ 'with-suffix': slots.suffix,
+ animation: animation.value,
+ 'is-disabled': disabled.value,
+ }));
+
+ const onClick = (e: MouseEvent) => {
+ emit('click', e);
+ };
+
+ return () => {
+ return (
+
+ );
+ };
+ },
+});
diff --git a/opendesign/button/src/var.scss b/opendesign/button/src/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9c992381b2140ac8c1877b1eeb82848c85ec684f
--- /dev/null
+++ b/opendesign/button/src/var.scss
@@ -0,0 +1,90 @@
+.o-button {
+ // 文字颜色
+ --o-button-font-color: var(--o-color-brand1);
+ --o-button-font-color-primary: var(--o-color-text2);
+ --o-button-font-color-secondary: var(--o-color-text1);
+ --o-button-font-color-text: var(--o-color-text1);
+ // 文字颜色 hover态，注：只有类型为outline的按钮hover时有文字颜色变化
+ --o-button-font-color_hover: var(--o-color-brand2);
+ // 文字颜色 avtive态，注：只有类型为outline的按钮active时有文字颜色变化
+ --o-button-font-color_active: var(--o-color-brand3);
+ // 文字颜色 disabled态
+ --o-button-font-color_disabled: var(--o-color-brand5);
+ --o-button-font-color-primary_disabled: var(--o-color-text2);
+ --o-button-font-color-secondary_disabled: var(--o-color-text1);
+ --o-button-font-color-text_disabled: var(--o-color-text5);
+
+ // 背景颜色
+ --o-button-bg-color: var(--o-color-transparent);
+ --o-button-bg-color-primary: var(--o-color-brand1);
+ --o-button-bg-color-secondary: var(--o-color-secondary);
+ --o-button-bg-color-text: var(--o-color-transparent);
+ // 背景颜色 hover态
+ --o-button-bg-color_hover: var(--o-color-transparent);
+ --o-button-bg-color-primary_hover: var(--o-color-brand2);
+ --o-button-bg-color-secondary_hover: var(--o-color-secondary_hover);
+ --o-button-bg-color-text_hover: var(--o-color-secondary_hover);
+ // 背景颜色 active态
+ --o-button-bg-color_active: var(--o-color-transparent);
+ --o-button-bg-color-primary_active: var(--o-color-brand3);
+ --o-button-bg-color-secondary_active: var(--o-color-secondary_active);
+ --o-button-bg-color-text_active: var(--o-color-secondary_active);
+ // 背景颜色 disabled态
+ --o-button-bg-color_disabled: var(--o-color-transparent);
+ --o-button-bg-color-primary_disabled: var(--o-color-brand5);
+ --o-button-bg-color-secondary_disabled: var(--o-color-secondary_disabled);
+ --o-button-bg-color-text_disabled: var(--o-color-secondary_disabled);
+
+ // border
+ --o-button-border: 1px solid var(--o-color-brand1);
+ --o-button-border-primary: 1px solid var(--o-color-brand1);
+ --o-button-border-secondary: 1px solid var(--o-color-secondary);
+ --o-button-border-text: 1px solid var(--o-color-transparent);
+ // border hover态
+ --o-button-border_hover: 1px solid var(--o-color-brand2);
+ --o-button-border-primary_hover: 1px solid var(--o-color-brand2);
+ --o-button-border-secondary_hover: 1px solid var(--o-color-secondary_hover);
+ --o-button-border-text_hover: 1px solid var(--o-color-secondary_hover);
+ // border active态
+ --o-button-border_active: 1px solid var(--o-color-brand3);
+ --o-button-border-primary_active: 1px solid var(--o-color-brand3);
+ --o-button-border-secondary_active: 1px solid var(--o-color-secondary_active);
+ --o-button-border-text_active: 1px solid var(--o-color-secondary_active);
+ // border disabled态
+ --o-button-border_disabled: 1px solid var(--o-color-brand5);
+ --o-button-border-primary_disabled: 1px solid var(--o-color-brand5);
+ --o-button-border-secondary_disabled: 1px solid
+ var(--o-color-secondary_disabled);
+ --o-button-border-text_disabled: 1px solid var(--o-color-transparent);
+
+ // font-size
+ --o-button-font-size: var(--o-font-size-h8);
+ --o-button-font-size-small: var(--o-font-size-text);
+ --o-button-font-size-mini: var(--o-font-size-tip);
+
+ // line-height
+ --o-button-line-height: var(--o-line-height-h8);
+ --o-button-line-height-small: var(--o-line-height-text);
+ --o-button-line-height-mini: var(--o-line-height-tip);
+
+ // padding
+ --o-button-padding: 11px 28px;
+ --o-button-padding-small: 9px 28px;
+ --o-button-padding-mini: 6px 16px;
+
+ // icon margin
+ --o-button-icon-margin: 8px;
+ --o-button-icon-margin-small: 8px;
+ --o-button-icon-margin-mini: 4px;
+ // icon font-size
+ --o-button-icon-font-size: var(--o-font-size-h5);
+ --o-button-icon-font-size-small: var(--o-font-size-h8);
+ --o-button-icon-font-size-mini: var(--o-font-size-tip);
+ // icon padding
+ --o-button-icon-paddding: 20px;
+ --o-button-icon-paddding-small: 14px;
+ --o-button-icon-paddding-mini: 6x;
+
+ // animation
+ -o-button-transition: color 0.2s, background-color 0.3s, border 0.3s;
+}
diff --git a/opendesign/card/OCard.vue b/opendesign/card/OCard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4cfc689b8964e3086c6a252fdd78f1218c6551ab
--- /dev/null
+++ b/opendesign/card/OCard.vue
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/opendesign/card/index.ts b/opendesign/card/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7a07a1b9fd0d11195eeb2d749b5dbdf213440876
--- /dev/null
+++ b/opendesign/card/index.ts
@@ -0,0 +1,7 @@
+import type { App } from 'vue';
+import Card from './OCard.vue';
+Card.install = function (app: App) {
+ app.component('OCard', Card);
+};
+
+export { Card };
diff --git a/opendesign/carousel/index.ts b/opendesign/carousel/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/opendesign/checkbox/index.ts b/opendesign/checkbox/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4992370144fecef6c5fa2847d94461481990b747
--- /dev/null
+++ b/opendesign/checkbox/index.ts
@@ -0,0 +1,13 @@
+import type { App } from 'vue';
+import Checkbox from './src/checkbox';
+import CheckboxGroup from './src/checkbox-group';
+
+Checkbox.install = function (app: App) {
+ app.component(Checkbox.name, Checkbox);
+};
+
+CheckboxGroup.install = function (app: App) {
+ app.component(CheckboxGroup.name, CheckboxGroup);
+};
+
+export { Checkbox, CheckboxGroup };
diff --git a/opendesign/checkbox/src/checkbox-group-types.ts b/opendesign/checkbox/src/checkbox-group-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..608fe1a1a2767c66c863bc97c830c922ddc9093a
--- /dev/null
+++ b/opendesign/checkbox/src/checkbox-group-types.ts
@@ -0,0 +1,28 @@
+import { ExtractDefaultPropTypes, InjectionKey, PropType, Ref } from 'vue';
+
+export const checkboxGroupProps = {
+ // 双向绑定值
+ modelValue: {
+ type: Array as PropType>,
+ default: null,
+ },
+ // 是否禁用
+ disabled: {
+ type: Boolean,
+ default: false,
+ },
+};
+
+export type CheckboxGroupProps = ExtractDefaultPropTypes<
+ typeof checkboxGroupProps
+>;
+
+interface CheckboxGroupInjection {
+ modelValue: Ref>;
+ disabled: Ref;
+ // eslint-disable-next-line no-unused-vars
+ onChange: (val: Array) => void;
+}
+
+export const checkboxGroupKey: InjectionKey =
+ Symbol('OCheckboxGroup');
diff --git a/opendesign/checkbox/src/checkbox-group.scss b/opendesign/checkbox/src/checkbox-group.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4b7bd0f3a9a6216085936106622224228a5ae96c
--- /dev/null
+++ b/opendesign/checkbox/src/checkbox-group.scss
@@ -0,0 +1,7 @@
+.o-checkbox-group {
+ display: flex;
+ align-items: center;
+ .o-checkbox + .o-checkbox {
+ margin-left: 24px;
+ }
+}
diff --git a/opendesign/checkbox/src/checkbox-group.tsx b/opendesign/checkbox/src/checkbox-group.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..62bd5f34c7e8c1fd0892d453ff421e05c2e9272c
--- /dev/null
+++ b/opendesign/checkbox/src/checkbox-group.tsx
@@ -0,0 +1,28 @@
+import { defineComponent, provide, toRefs } from 'vue';
+import {
+ checkboxGroupKey,
+ checkboxGroupProps,
+ CheckboxGroupProps,
+} from './checkbox-group-types';
+import './checkbox-group.scss';
+
+export default defineComponent({
+ name: 'OCheckboxGroup',
+ props: checkboxGroupProps,
+ emits: ['update:modelValue', 'change'],
+ setup(props: CheckboxGroupProps, { emit, slots }) {
+ const { modelValue, disabled } = toRefs(props);
+
+ const onChange = (val: Array) => {
+ emit('update:modelValue', val);
+ emit('change', val);
+ };
+
+ // 注入
+ provide(checkboxGroupKey, { modelValue, disabled, onChange });
+
+ return () => {
+ return {slots.default?.()}
;
+ };
+ },
+});
diff --git a/opendesign/checkbox/src/checkbox-types.ts b/opendesign/checkbox/src/checkbox-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..695189bfef4606477520997412e00d09f461d7a3
--- /dev/null
+++ b/opendesign/checkbox/src/checkbox-types.ts
@@ -0,0 +1,27 @@
+import { ExtractDefaultPropTypes, PropType } from 'vue';
+
+export const checkboxProps = {
+ // 双向绑定值
+ modelValue: {
+ type: [String, Number, Boolean] as PropType,
+ default: null,
+ },
+ // value
+ value: {
+ type: [String, Number, Boolean] as PropType,
+ required: true,
+ default: null,
+ },
+ // 是否禁用
+ disabled: {
+ type: Boolean,
+ default: false,
+ },
+ // name
+ name: {
+ type: String,
+ default: '',
+ },
+};
+
+export type CheckboxProps = ExtractDefaultPropTypes;
diff --git a/opendesign/checkbox/src/checkbox.scss b/opendesign/checkbox/src/checkbox.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e4fbfd1316b3d8a897edf1ab7524ec200f72be64
--- /dev/null
+++ b/opendesign/checkbox/src/checkbox.scss
@@ -0,0 +1,49 @@
+.o-checkbox {
+ display: inline-flex;
+ align-items: center;
+ position: relative;
+ font-size: var(--o-font-size-text);
+ line-height: var(--o-line-height-text);
+ cursor: pointer;
+
+ input[type='checkbox'] {
+ position: absolute;
+ outline: none;
+ z-index: -1;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ opacity: 0;
+ }
+
+ &-icon {
+ width: 16px;
+ height: 16px;
+ border: 1px solid var(--o-color-division1);
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ color: var(--o-color-white);
+ // transition: border-color 0.25s cubic-bezier(0.645, 0.045, 0.355, 1),
+ // background-color 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
+ }
+
+ &-label {
+ margin-left: 8px;
+ color: var(--o-color-text1);
+ }
+
+ &:hover {
+ .o-checkbox-icon {
+ border-color: var(--o-color-brand1);
+ }
+ }
+
+ &.o-checkbox-checked {
+ .o-checkbox-icon {
+ background-color: var(--o-color-brand1);
+ border-color: var(--o-color-brand1);
+ }
+ }
+}
diff --git a/opendesign/checkbox/src/checkbox.tsx b/opendesign/checkbox/src/checkbox.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9b69eb1277b6fc54e9aafb98e95a604ebf9dfeec
--- /dev/null
+++ b/opendesign/checkbox/src/checkbox.tsx
@@ -0,0 +1,102 @@
+import { computed, defineComponent, inject } from 'vue';
+import { checkboxGroupKey } from './checkbox-group-types';
+import { checkboxProps, CheckboxProps } from './checkbox-types';
+import './checkbox.scss';
+
+export default defineComponent({
+ name: 'OCheckbox',
+ props: checkboxProps,
+ emits: ['update:modelValue', 'change'],
+ setup(props: CheckboxProps, { emit, slots }) {
+ const checkboxGroupInjection = inject(checkboxGroupKey, null);
+
+ // 是否禁用
+ const isDisabled = computed(
+ () => checkboxGroupInjection?.disabled.value || props.disabled
+ );
+
+ // 是否选中
+ const isChecked = computed(() =>
+ checkboxGroupInjection
+ ? checkboxGroupInjection.modelValue.value.includes(props.value)
+ : props.value === props.modelValue
+ );
+
+ const onClick = (e: Event) => {
+ e.stopPropagation();
+ };
+
+ const onChange = (e: Event) => {
+ if (isDisabled.value) {
+ return;
+ }
+ const { checked } = e.target as HTMLInputElement;
+ let newValue;
+ if (checkboxGroupInjection) {
+ newValue = [...checkboxGroupInjection.modelValue.value];
+ if (checked) {
+ newValue.push(props.value);
+ } else {
+ newValue = newValue.filter((item) => item !== props.value);
+ }
+
+ checkboxGroupInjection?.onChange(newValue);
+ } else {
+ newValue = props.value;
+ }
+
+ emit('update:modelValue', newValue);
+ emit('change', newValue);
+ };
+
+ const getContent = () => {
+ if (slots.checkbox) {
+ return slots.checkbox({
+ checked: isChecked.value,
+ disabled: isDisabled.value,
+ });
+ } else {
+ return (
+ <>
+
+ {isChecked.value ? (
+
+ ) : (
+ ''
+ )}
+
+ {slots.default?.()}
+
+ );
+ }
+ };
+
+ return () => {
+ return (
+
+ );
+ };
+ },
+});
diff --git a/opendesign/collapse/OCollapse.vue b/opendesign/collapse/OCollapse.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ec3b1ed9654b8f8be8f9d8b13f6b48dd4306a9e9
--- /dev/null
+++ b/opendesign/collapse/OCollapse.vue
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+
+
+
diff --git a/opendesign/collapse/OCollapseItem.vue b/opendesign/collapse/OCollapseItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..263ccfb9f56c1180f47afa5e21e9804198e2e147
--- /dev/null
+++ b/opendesign/collapse/OCollapseItem.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/opendesign/collapse/index.ts b/opendesign/collapse/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bccdd918fa0140c17ef82682a304a76609fd0d86
--- /dev/null
+++ b/opendesign/collapse/index.ts
@@ -0,0 +1,10 @@
+import type { App } from 'vue';
+import Collapse from './OCollapse.vue';
+import CollapseItem from './OCollapseItem.vue';
+Collapse.install = function (app: App) {
+ app.component('OCollapse', Collapse);
+};
+CollapseItem.install = function (app: App) {
+ app.component('OCollapseItem', CollapseItem);
+};
+export { Collapse, CollapseItem };
diff --git a/opendesign/container/index.ts b/opendesign/container/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d4355f5bb927b2d5a7e4876fa4a269fbf588386c
--- /dev/null
+++ b/opendesign/container/index.ts
@@ -0,0 +1,8 @@
+import type { App } from 'vue';
+import Container from './src/container';
+
+Container.install = function (app: App) {
+ app.component(Container.name, Container);
+};
+
+export { Container };
diff --git a/opendesign/container/src/container-types.ts b/opendesign/container/src/container-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8f97141fc197f1c928d5a6d1b58718687b7740ad
--- /dev/null
+++ b/opendesign/container/src/container-types.ts
@@ -0,0 +1,18 @@
+import { ExtractDefaultPropTypes, PropType } from 'vue';
+
+type ContainerLevelIndex = 1 | 2 | 3 | 4 | 5;
+
+export const containerProps = {
+ // 层级
+ levelIndex: {
+ type: Number as PropType,
+ default: 2,
+ },
+ // 是否有阴影
+ shadow: {
+ type: Boolean,
+ default: true,
+ },
+};
+
+export type ContainerProps = ExtractDefaultPropTypes;
diff --git a/opendesign/container/src/container.scss b/opendesign/container/src/container.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b6a8bcd5b799118e7dd23f0d819701aa82340694
--- /dev/null
+++ b/opendesign/container/src/container.scss
@@ -0,0 +1,31 @@
+@import './var.scss';
+
+.o-container {
+ &-level1 {
+ background-color: var(--o-container-bg-color-level1);
+ box-shadow: var(--o-container-shadow-level1);
+ }
+ &-level2 {
+ background-color: var(--o-container-bg-color-level2);
+ box-shadow: var(--o-container-shadow-level2);
+
+ &:hover {
+ @media screen and (min-width: 1100px) {
+ background-color: var(--o-container-bg-color-level2_hover);
+ box-shadow: var(--o-container-shadow-level2_hover);
+ }
+ }
+ }
+ &-level3 {
+ background-color: var(--o-container-bg-color-level3);
+ box-shadow: var(--o-container-shadow-level3);
+ }
+ &-level4 {
+ background-color: var(--o-container-bg-color-level4);
+ box-shadow: var(--o-container-shadow-level4);
+ }
+ &-level5 {
+ background-color: var(--o-container-bg-color-level5);
+ box-shadow: var(--o-container-shadow-level5);
+ }
+}
diff --git a/opendesign/container/src/container.tsx b/opendesign/container/src/container.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bba10b223678837551901d25f69d31ec30072250
--- /dev/null
+++ b/opendesign/container/src/container.tsx
@@ -0,0 +1,17 @@
+import { defineComponent } from 'vue';
+import { containerProps, ContainerProps } from './container-types';
+import './container.scss';
+
+export default defineComponent({
+ name: 'OContainer',
+ props: containerProps,
+ setup(props: ContainerProps, { slots }) {
+ return () => {
+ return (
+
+ {slots.default?.()}
+
+ );
+ };
+ },
+});
diff --git a/opendesign/container/src/var.scss b/opendesign/container/src/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..31dbca79815de4a00b062fbca1b45ca25f48d1de
--- /dev/null
+++ b/opendesign/container/src/var.scss
@@ -0,0 +1,17 @@
+.o-container {
+ // 背景颜色
+ --o-container-bg-color-level1: var(--o-color-fill1);
+ --o-container-bg-color-level2: var(--o-color-fill2);
+ --o-container-bg-color-level2_hover: var(--o-color-fill2_hover);
+ --o-container-bg-color-level3: var(--o-color-fill3);
+ --o-container-bg-color-level4: var(--o-color-fill4);
+ --o-container-bg-color-level5: var(--o-color-fill5);
+
+ // 阴影
+ --o-container-shadow-level1: var(--o-shadow-l1);
+ --o-container-shadow-level2: var(--o-shadow-l2);
+ --o-container-shadow-level2_hover: var(--o-shadow-l2_hover);
+ --o-container-shadow-level3: var(--o-shadow-l3);
+ --o-container-shadow-level4: var(--o-shadow-l4);
+ --o-container-shadow-level5: var(--o-shadow-l5);
+}
diff --git a/opendesign/data-picker/ODatePicker.vue b/opendesign/data-picker/ODatePicker.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0b63fde22b82f752394d18430a6e6b1ccf0717ba
--- /dev/null
+++ b/opendesign/data-picker/ODatePicker.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
diff --git a/opendesign/data-picker/index.ts b/opendesign/data-picker/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a8990ef66c97c3d42cd7b57db6761d164492183b
--- /dev/null
+++ b/opendesign/data-picker/index.ts
@@ -0,0 +1,7 @@
+import type { App } from 'vue';
+import DatePicker from './ODatePicker.vue';
+DatePicker.install = function (app: App) {
+ app.component('ODatePicker', DatePicker);
+};
+
+export { DatePicker };
diff --git a/opendesign/dialog/ODialog.vue b/opendesign/dialog/ODialog.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5b718eca981d5e6d4ee97036499d2dcfa562cd3e
--- /dev/null
+++ b/opendesign/dialog/ODialog.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
diff --git a/opendesign/dialog/index.ts b/opendesign/dialog/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7d58df2b66238288dd48af4d96e7c5c5c293dccc
--- /dev/null
+++ b/opendesign/dialog/index.ts
@@ -0,0 +1,7 @@
+import type { App } from 'vue';
+import Dialog from './ODialog.vue';
+Dialog.install = function (app: App) {
+ app.component('ODialog', Dialog);
+};
+
+export { Dialog };
diff --git a/opendesign/drawer/ODrawer.vue b/opendesign/drawer/ODrawer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..136ac5366bb6244e623b59c546f34b7a4c7fcc6d
--- /dev/null
+++ b/opendesign/drawer/ODrawer.vue
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/opendesign/drawer/index.ts b/opendesign/drawer/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fb09bdd38c8219163740cfbdbaa79a22e9bfdea1
--- /dev/null
+++ b/opendesign/drawer/index.ts
@@ -0,0 +1,7 @@
+import type { App } from 'vue';
+import Drawer from './ODrawer.vue';
+
+Drawer.install = function (app: App) {
+ app.component('ODrawer', Drawer);
+};
+export { Drawer };
diff --git a/opendesign/icon/OIcon.vue b/opendesign/icon/OIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5bd32fa69c458a290ecb9caff9f22750c50c1b9c
--- /dev/null
+++ b/opendesign/icon/OIcon.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
diff --git a/opendesign/icon/index.ts b/opendesign/icon/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d2a3f0c2325cb6b8c5baca1da6578ae7a42b69c9
--- /dev/null
+++ b/opendesign/icon/index.ts
@@ -0,0 +1,8 @@
+import type { App } from 'vue';
+import Icon from './OIcon.vue';
+
+Icon.install = function (app: App) {
+ app.component('OIcon', Icon);
+};
+
+export { Icon };
diff --git a/opendesign/index.ts b/opendesign/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f78abbc75741287ef045f52a90d04807250ec163
--- /dev/null
+++ b/opendesign/index.ts
@@ -0,0 +1,63 @@
+import type { App } from 'vue';
+
+import './style/variable.scss';
+
+import { Button } from './button';
+import { Radio, RadioGroup } from './radio';
+import { Checkbox, CheckboxGroup } from './checkbox';
+import { Select, Option } from './select';
+import { DatePicker } from './data-picker';
+import { TimeSelect } from './time-select';
+
+import { Icon } from './icon';
+import { Card } from './card';
+import { Dialog } from './dialog';
+import { Tag } from './tag';
+import { Tabs, TabPane } from './tabs';
+import { Input } from './input';
+import { Tree } from './tree';
+import { Pagination } from './pagination';
+import { Table, TableColumn } from './table';
+import { Timeline } from './timeline';
+import { Search } from './search';
+import { Drawer } from './drawer';
+import { Switch } from './switch';
+import { Collapse, CollapseItem } from './collapse';
+import { Container } from './container';
+
+const components = [
+ Button,
+ Radio,
+ RadioGroup,
+ Checkbox,
+ CheckboxGroup,
+ Select,
+ Option,
+ DatePicker,
+ TimeSelect,
+ Icon,
+ Card,
+ Dialog,
+ Pagination,
+ Table,
+ TableColumn,
+ Tag,
+ Timeline,
+ Input,
+ Tabs,
+ TabPane,
+ Tree,
+ Search,
+ Drawer,
+ Switch,
+ Collapse,
+ CollapseItem,
+ Container,
+];
+export default {
+ install(app: App): void {
+ components.forEach((component) => {
+ app.use(component as any);
+ });
+ },
+};
diff --git a/opendesign/input/OInput.vue b/opendesign/input/OInput.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f4fa7015f6f416b0d80f34d8c28b079feda36b48
--- /dev/null
+++ b/opendesign/input/OInput.vue
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
diff --git a/opendesign/input/index.ts b/opendesign/input/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dd41787e6411b793c7f66027debd46dfbca4f176
--- /dev/null
+++ b/opendesign/input/index.ts
@@ -0,0 +1,7 @@
+import type { App } from 'vue';
+import Input from './OInput.vue';
+Input.install = function (app: App) {
+ app.component('OInput', Input);
+};
+
+export { Input };
diff --git a/opendesign/package.json b/opendesign/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..5af3bcac5080f4114a47404383e7b2bbac900180
--- /dev/null
+++ b/opendesign/package.json
@@ -0,0 +1,9 @@
+{
+ "name": "opendesign",
+ "version": "0.0.1",
+ "description": "opendesign components",
+ "main": "index.ts",
+ "dependencies": {
+ "vue": "^3.2.33"
+ }
+}
diff --git a/opendesign/pagination/OPagination.vue b/opendesign/pagination/OPagination.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4939b33ae14bff7fe3a52ed7abfd9be7f689cea4
--- /dev/null
+++ b/opendesign/pagination/OPagination.vue
@@ -0,0 +1,145 @@
+
+
+
+
+
+
+
diff --git a/opendesign/pagination/index.ts b/opendesign/pagination/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e90ec8c79f477d5476368dfdd28472d9ac9a6f40
--- /dev/null
+++ b/opendesign/pagination/index.ts
@@ -0,0 +1,7 @@
+import type { App } from 'vue';
+import Pagination from './OPagination.vue';
+Pagination.install = function (app: App) {
+ app.component('OPagination', Pagination);
+};
+
+export { Pagination };
\ No newline at end of file
diff --git a/opendesign/radio/index.ts b/opendesign/radio/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..35f2f2c39d18d1d370c791ab5ce9055c3c017c93
--- /dev/null
+++ b/opendesign/radio/index.ts
@@ -0,0 +1,13 @@
+import type { App } from 'vue';
+import Radio from './src/radio';
+import RadioGroup from './src/radio-group';
+
+Radio.install = function (app: App) {
+ app.component(Radio.name, Radio);
+};
+
+RadioGroup.install = function (app: App) {
+ app.component(RadioGroup.name, RadioGroup);
+};
+
+export { Radio, RadioGroup };
diff --git a/opendesign/radio/src/radio-group-types.ts b/opendesign/radio/src/radio-group-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2085a688c9130a9a143ed6b24625343bf30ce240
--- /dev/null
+++ b/opendesign/radio/src/radio-group-types.ts
@@ -0,0 +1,26 @@
+import { ExtractDefaultPropTypes, InjectionKey, PropType, Ref } from 'vue';
+
+export const radioGroupProps = {
+ // 双向绑定值
+ modelValue: {
+ type: [String, Number, Boolean] as PropType,
+ default: null,
+ },
+ // 是否禁用
+ disabled: {
+ type: Boolean,
+ default: false,
+ },
+};
+
+export type RadioGroupProps = ExtractDefaultPropTypes;
+
+interface RadioGroupInjection {
+ modelValue: Ref;
+ disabled: Ref;
+ // eslint-disable-next-line no-unused-vars
+ onChange: (val: string | number | boolean) => void;
+}
+
+export const radioGroupKey: InjectionKey =
+ Symbol('ORadioGroup');
diff --git a/opendesign/radio/src/radio-group.scss b/opendesign/radio/src/radio-group.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e74b34fd7bee7e63a40f04727770f22bc6cf060e
--- /dev/null
+++ b/opendesign/radio/src/radio-group.scss
@@ -0,0 +1,7 @@
+.o-radio-group {
+ display: flex;
+ align-items: center;
+ .o-radio + .o-radio {
+ margin-left: 24px;
+ }
+}
diff --git a/opendesign/radio/src/radio-group.tsx b/opendesign/radio/src/radio-group.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1dd0aa01dae6980a1b007733740f2f7ecdeff3ab
--- /dev/null
+++ b/opendesign/radio/src/radio-group.tsx
@@ -0,0 +1,28 @@
+import { defineComponent, provide, toRefs } from 'vue';
+import {
+ radioGroupKey,
+ radioGroupProps,
+ RadioGroupProps,
+} from './radio-group-types';
+import './radio-group.scss';
+
+export default defineComponent({
+ name: 'ORadioGroup',
+ props: radioGroupProps,
+ emits: ['update:modelValue', 'change'],
+ setup(props: RadioGroupProps, { emit, slots }) {
+ const { modelValue, disabled } = toRefs(props);
+
+ const onChange = (val: string | number | boolean) => {
+ emit('update:modelValue', val);
+ emit('change', val);
+ };
+
+ // 注入
+ provide(radioGroupKey, { modelValue, disabled, onChange });
+
+ return () => {
+ return {slots.default?.()}
;
+ };
+ },
+});
diff --git a/opendesign/radio/src/radio-types.ts b/opendesign/radio/src/radio-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..19920b69c053ac7e6a75110e68645fbca05ad49f
--- /dev/null
+++ b/opendesign/radio/src/radio-types.ts
@@ -0,0 +1,22 @@
+import { ExtractDefaultPropTypes, PropType } from 'vue';
+
+export const radioProps = {
+ // 双向绑定值
+ modelValue: {
+ type: [String, Number, Boolean] as PropType,
+ default: null,
+ },
+ // value
+ value: {
+ type: [String, Number, Boolean] as PropType,
+ required: true,
+ default: null,
+ },
+ // 是否禁用
+ disabled: {
+ type: Boolean,
+ default: false,
+ },
+};
+
+export type RadioProps = ExtractDefaultPropTypes;
diff --git a/opendesign/radio/src/radio.scss b/opendesign/radio/src/radio.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3fc31dc573acd59255943061177e1df36e2a3702
--- /dev/null
+++ b/opendesign/radio/src/radio.scss
@@ -0,0 +1,72 @@
+.o-radio {
+ display: inline-flex;
+ align-items: center;
+ position: relative;
+ font-size: var(--o-font-size-text);
+ line-height: var(--o-line-height-text);
+ cursor: pointer;
+
+ input[type='radio'] {
+ position: absolute;
+ outline: none;
+ z-index: -1;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ opacity: 0;
+ }
+
+ &-icon {
+ position: relative;
+ display: inline-block;
+ border-radius: 50%;
+ width: 18px;
+ height: 18px;
+ background: var(--o-color-bg2);
+ border: 1px solid var(--o-color-border1);
+
+ &::after {
+ content: '';
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ background-color: transparent;
+ transition: background-color 0.3s;
+ }
+ }
+
+ &-label {
+ margin-left: 8px;
+ color: var(--o-color-text1);
+ }
+
+ &.o-radio-checked {
+ .o-radio-icon {
+ &::after {
+ background-color: var(--o-color-brand1);
+ }
+ }
+ }
+
+ &.o-radio-disabled {
+ cursor: not-allowed;
+ .o-radio-label {
+ color: var(--o-color-text5);
+ }
+ .o-radio-icon {
+ border-color: var(--o-color-border2);
+ }
+ &.o-radio-checked {
+ .o-radio-icon {
+ &::after {
+ background-color: var(--o-color-brand5);
+ }
+ }
+ }
+ }
+}
diff --git a/opendesign/radio/src/radio.tsx b/opendesign/radio/src/radio.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fb2b4d29168cf6ef571d4e848ea829142ac7d7a2
--- /dev/null
+++ b/opendesign/radio/src/radio.tsx
@@ -0,0 +1,79 @@
+import { computed, defineComponent, inject } from 'vue';
+import { radioGroupKey } from './radio-group-types';
+import { radioProps, RadioProps } from './radio-types';
+import './radio.scss';
+
+export default defineComponent({
+ name: 'ORadio',
+ props: radioProps,
+ emits: ['update:modelValue', 'change'],
+ setup(props: RadioProps, { emit, slots }) {
+ const radioGroupInjection = inject(radioGroupKey, null);
+
+ // 是否禁用
+ const isDisabled = computed(
+ () => radioGroupInjection?.disabled.value || props.disabled
+ );
+
+ // 是否选中
+ const isChecked = computed(
+ () =>
+ props.value ===
+ (radioGroupInjection
+ ? radioGroupInjection.modelValue.value
+ : props.modelValue)
+ );
+
+ const onClick = (e: Event) => {
+ e.stopPropagation();
+ };
+
+ const onChange = () => {
+ if (isDisabled.value) {
+ return;
+ }
+
+ const val = props.value;
+ radioGroupInjection?.onChange(val);
+ emit('update:modelValue', val);
+ emit('change', val);
+ };
+
+ const getContent = () => {
+ if (slots.radio) {
+ return slots.radio({
+ checked: isChecked.value,
+ disabled: isDisabled.value,
+ });
+ } else {
+ return (
+ <>
+
+ {slots.default?.()}
+
+ );
+ }
+ };
+
+ return () => {
+ return (
+
+ );
+ };
+ },
+});
diff --git a/opendesign/radio/src/var.scss b/opendesign/radio/src/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ad6c1046b63d1d3cb21daac846fbbd871beaeda2
--- /dev/null
+++ b/opendesign/radio/src/var.scss
@@ -0,0 +1,6 @@
+.o-radio {
+ --o-radio-font-size: var(--o-font-size-text);
+ --o-radio-line-height: var(--o-line-height-text);
+ --o-radio-icon-width: 18px;
+ --o-radio-icon-height: 18px;
+}
diff --git a/opendesign/search/OSearch.vue b/opendesign/search/OSearch.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f0f5fffe1c2354476aa99a410546da15831a0ada
--- /dev/null
+++ b/opendesign/search/OSearch.vue
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/opendesign/search/index.ts b/opendesign/search/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..119d1b73829ff42461c004d8be0511131a52d25c
--- /dev/null
+++ b/opendesign/search/index.ts
@@ -0,0 +1,7 @@
+import type { App } from 'vue';
+import Search from './OSearch.vue';
+Search.install = function (app: App) {
+ app.component('OSearch', Search);
+};
+
+export { Search };
diff --git a/opendesign/select/OOption.vue b/opendesign/select/OOption.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fabca8082e86f5ea966328a24734b355b7a5fabe
--- /dev/null
+++ b/opendesign/select/OOption.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
diff --git a/opendesign/select/OSelect.vue b/opendesign/select/OSelect.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7abf51db7918350ab8530d2edd858721c3572fe2
--- /dev/null
+++ b/opendesign/select/OSelect.vue
@@ -0,0 +1,143 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/opendesign/select/index.ts b/opendesign/select/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9f7a8f23f3cf3d18fec3aca47c099a58692dadc8
--- /dev/null
+++ b/opendesign/select/index.ts
@@ -0,0 +1,11 @@
+import type { App } from 'vue';
+import Select from './OSelect.vue';
+import Option from './OOption.vue';
+Select.install = function (app: App) {
+ app.component('OSelect', Select);
+};
+Option.install = function (app: App) {
+ app.component('OOption', Option);
+};
+
+export { Select, Option };
diff --git a/opendesign/select/src/select-types.ts b/opendesign/select/src/select-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..307d3a420830bca3e15f031b479b05d741fd9f57
--- /dev/null
+++ b/opendesign/select/src/select-types.ts
@@ -0,0 +1,10 @@
+import { ExtractDefaultPropTypes, PropType } from 'vue';
+
+export const selectProps = {
+ // 双向绑定值
+ modelValue: {
+ type: [String, Number, Boolean] as PropType,
+ },
+};
+
+export type SelectProps = ExtractDefaultPropTypes;
diff --git a/opendesign/style/_animation.scss b/opendesign/style/_animation.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/app/.vitepress/src/shared/styles/opendesign/_color.scss b/opendesign/style/_color.scss
similarity index 99%
rename from app/.vitepress/src/shared/styles/opendesign/_color.scss
rename to opendesign/style/_color.scss
index 2d7e2d3ffcafd505abee7ca3c7ce278ccadbadc4..5b8a9959e1185d61885f9f70e6e22e09eba10e8b 100644
--- a/app/.vitepress/src/shared/styles/opendesign/_color.scss
+++ b/opendesign/style/_color.scss
@@ -164,4 +164,6 @@
--o-color-fill3: var(--o-color-white); // SL3 三级投影容器背景，应用于一级投影上的卡片、组件等
--o-color-fill4: var(--o-color-white); // SL4 覆盖阴影容器背景，应用于信息提示【tips、活动进入按钮等】等投影容器
--o-color-fill5: var(--o-color-white); // SL5 弹出阴影容器背景，应用于模态弹窗投影
+
+ --o-color-fill6:255,255,255;
}
diff --git a/app/.vitepress/src/shared/styles/opendesign/_font.scss b/opendesign/style/_font.scss
similarity index 100%
rename from app/.vitepress/src/shared/styles/opendesign/_font.scss
rename to opendesign/style/_font.scss
diff --git a/app/.vitepress/src/shared/styles/opendesign/_shadow.scss b/opendesign/style/_shadow.scss
similarity index 82%
rename from app/.vitepress/src/shared/styles/opendesign/_shadow.scss
rename to opendesign/style/_shadow.scss
index 78dcd8d96a0a483060378c3cdb1dd4e6b7e80178..31c21c71a49cbf0ed7a68f998a6b0cdadf53c42e 100644
--- a/app/.vitepress/src/shared/styles/opendesign/_shadow.scss
+++ b/opendesign/style/_shadow.scss
@@ -2,7 +2,7 @@
:root {
--o-shadow-l1: 0 1px 5px rgba(45, 47, 51, 0.1); // SL1 一级投影，应用于楼层、导航栏、组件里局部投影等，
--o-shadow-l2: 0 1px 5px rgba(45, 47, 51, 0.1); // SL2-normal 二级投影，应用于卡片、组件里局部投影等
- --o-shadow-l2_hover: 0 6px 18px rgba(0, 47, 167, 0.14); // SL2-hover 升起投影，应用于悬停状态的卡片等，是SL2的激活态
+ --o-shadow-l2_hover: 0 6px 18px rgba(125, 50, 234, 0.14); // SL2-hover 升起投影，应用于悬停状态的卡片等，是SL2的激活态
--o-shadow-l3: 0 6px 18px rgba(45, 47, 51, 0.14); // SL3 三级投影，应用于一级投影上的卡片、组件等
--o-shadow-l4: 0 10px 32px rgba(45, 47, 51, 0.18); // SL4 覆盖阴影，应用于信息提示【tips、活动进入按钮等】等投影
--o-shadow-l5: 0 12px 42px rgba(45, 47, 51, 0.24); // SL5 弹出阴影，应用于模态弹窗投影
diff --git a/app/.vitepress/src/shared/styles/opendesign/_spacing.scss b/opendesign/style/_spacing.scss
similarity index 90%
rename from app/.vitepress/src/shared/styles/opendesign/_spacing.scss
rename to opendesign/style/_spacing.scss
index b61ec74fd4fe467b59acb83a8b8f6a46eacc76c2..e3dcd5bfbe1370420420c90af1683fed7df3393f 100644
--- a/app/.vitepress/src/shared/styles/opendesign/_spacing.scss
+++ b/opendesign/style/_spacing.scss
@@ -9,5 +9,5 @@
--o-spacing-h7: 10px;
--o-spacing-h8: 8px;
--o-spacing-h9: 6px;
- --o-spacing-10: 4px;
+ --o-spacing-h10: 4px;
}
diff --git a/app/.vitepress/src/shared/styles/opendesign/index.scss b/opendesign/style/variable.scss
similarity index 100%
rename from app/.vitepress/src/shared/styles/opendesign/index.scss
rename to opendesign/style/variable.scss
diff --git a/opendesign/switch/OSwitch.vue b/opendesign/switch/OSwitch.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ee3fea99196e7d7be3225a32b5c73f3300d82eae
--- /dev/null
+++ b/opendesign/switch/OSwitch.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
diff --git a/opendesign/switch/index.ts b/opendesign/switch/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ae6cb44779dfc31495ed2a6a23b8401c850c0ba5
--- /dev/null
+++ b/opendesign/switch/index.ts
@@ -0,0 +1,7 @@
+import type { App } from 'vue';
+import Switch from './OSwitch.vue';
+Switch.install = function (app: App) {
+ app.component('OSwitch', Switch);
+};
+
+export { Switch };
diff --git a/opendesign/table/OTable.vue b/opendesign/table/OTable.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c3298f45a36cfdd637ff602aa2d8209839b9c9b8
--- /dev/null
+++ b/opendesign/table/OTable.vue
@@ -0,0 +1,81 @@
+
+
+
+
+
+
+
+
+
diff --git a/opendesign/table/OTableColumn.vue b/opendesign/table/OTableColumn.vue
new file mode 100644
index 0000000000000000000000000000000000000000..982cabee1cd304c63253fc7d8908819392987141
--- /dev/null
+++ b/opendesign/table/OTableColumn.vue
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
diff --git a/opendesign/table/index.ts b/opendesign/table/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..839f04b1bd57afaf223481e118399e5550ac776b
--- /dev/null
+++ b/opendesign/table/index.ts
@@ -0,0 +1,10 @@
+import type { App } from 'vue';
+import Table from './OTable.vue';
+import TableColumn from './OTableColumn.vue';
+Table.install = function (app: App) {
+ app.component('OTable', Table);
+};
+TableColumn.install = function (app: App) {
+ app.component('OTableColumn', TableColumn);
+};
+export { Table, TableColumn };
diff --git a/opendesign/tabs/OTabPane.vue b/opendesign/tabs/OTabPane.vue
new file mode 100644
index 0000000000000000000000000000000000000000..074a678f34065aefb95d502397de207d15573f8c
--- /dev/null
+++ b/opendesign/tabs/OTabPane.vue
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
diff --git a/opendesign/tabs/OTabs.vue b/opendesign/tabs/OTabs.vue
new file mode 100644
index 0000000000000000000000000000000000000000..512563e966a82be5291cac6f858b727dab6896c5
--- /dev/null
+++ b/opendesign/tabs/OTabs.vue
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+
+
+
diff --git a/opendesign/tabs/index.ts b/opendesign/tabs/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7de648bb126b2b9658563f34bd70e83ec1cee1b3
--- /dev/null
+++ b/opendesign/tabs/index.ts
@@ -0,0 +1,11 @@
+import type { App } from 'vue';
+import Tabs from './OTabs.vue';
+import TabPane from './OTabPane.vue';
+Tabs.install = function (app: App) {
+ app.component('OTabs', Tabs);
+};
+TabPane.install = function (app: App) {
+ app.component('OTabPane', TabPane);
+};
+
+export { Tabs, TabPane };
diff --git a/opendesign/tag/index.ts b/opendesign/tag/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e966d8fb2abb17c6023d1db8a44c72661ea8ee9f
--- /dev/null
+++ b/opendesign/tag/index.ts
@@ -0,0 +1,8 @@
+import type { App } from 'vue';
+import Tag from './src/tag';
+
+Tag.install = function (app: App) {
+ app.component(Tag.name, Tag);
+};
+
+export { Tag };
diff --git a/opendesign/tag/src/tag-types.ts b/opendesign/tag/src/tag-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bff63be1de0aa25bdb623e6e19dbc1a229a54ec7
--- /dev/null
+++ b/opendesign/tag/src/tag-types.ts
@@ -0,0 +1,25 @@
+import { ExtractDefaultPropTypes, PropType } from 'vue';
+import { SizeType } from '../../_utils/common';
+
+type TagType = 'outline' | 'primary' | 'secondary' | 'text' | 'disabled';
+
+export const tagProps = {
+ size: {
+ type: String as PropType,
+ default: 'medium',
+ },
+ type: {
+ type: String as PropType,
+ default: 'outline',
+ },
+ checked: {
+ type: Boolean,
+ default: false,
+ },
+ checkable: {
+ type: Boolean,
+ default: false,
+ },
+};
+
+export type TagProps = ExtractDefaultPropTypes;
diff --git a/opendesign/tag/src/tag.scss b/opendesign/tag/src/tag.scss
new file mode 100644
index 0000000000000000000000000000000000000000..61a488422492047bc21aaeff44a5640be6185721
--- /dev/null
+++ b/opendesign/tag/src/tag.scss
@@ -0,0 +1,112 @@
+@import './var.scss';
+
+.o-tag {
+ padding: var(--o-tag-padding);
+ font-size: var(--o-tag-font-size);
+ line-height: var(--o-tag-line-height);
+ color: var(--o-tag-font-color);
+ border: var(--o-tag-border);
+ outline: none;
+ user-select: none;
+ cursor: default;
+ display: inline-block;
+
+ &:active {
+ @media screen and (min-width: 1100px) {
+ color: var(--o-tag-font-color_active);
+ border: var(--o-tag-font-color_active);
+ }
+ }
+
+ &.o-tag-type-primary {
+ color: var(--o-tag-font-color-primary);
+ border: var(--o-tag-border-primary);
+ &:hover {
+ @media screen and (min-width: 1100px) {
+ color: var(--o-color-brand2);
+ border: var(--o-tag-border-primary_hover);
+ }
+ }
+ &.o-tag-checked {
+ position: relative;
+ .checked-icon {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ width: 16px;
+ height: 16px;
+ &::after {
+ border: 8px solid transparent;
+ border-right: 8px solid var(--o-color-brand1);
+ border-bottom: 8px solid var(--o-color-brand1);
+ content: '';
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ bottom: -1px;
+ right: -1px;
+ display: block;
+ z-index: 1;
+ }
+ svg {
+ width: 9px;
+ height: 9px;
+ color: #fff;
+ display: block;
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ z-index: 2;
+ }
+ }
+ }
+ }
+ &.o-tag-checkable {
+ cursor: pointer;
+ }
+ &.o-tag-type-disabled {
+ color: var(--o-tag-font-color1);
+ border: var(--o-tag-border-secondary);
+ line-height: var(--o-tag-small-line-height);
+ padding: var(--o-tag-secondary-padding);
+ background: var(--o-tag-bg-color-disabled);
+ @media screen and (max-width: 767px) {
+ font-size: var(--o-tag-small-font-size);
+ }
+ }
+ &.o-tag-type-secondary {
+ color: var(--o-tag-font-color-secondary);
+ border: var(--o-tag-border-secondary);
+ line-height: var(--o-tag-small-line-height);
+ padding: var(--o-tag-secondary-padding);
+ background: var(--o-tag-bg-color-secondary);
+ @media screen and (max-width: 767px) {
+ font-size: var(--o-tag-small-font-size);
+ }
+ }
+
+ &.o-tag-type-text {
+ color: var(--o-tag-font-color);
+ border: var(--o-tag-border-text);
+ background: none;
+ &:hover,
+ &:active {
+ @media screen and (min-width: 1100px) {
+ color: var(--o-tag-font-color_hover);
+ }
+ }
+ }
+ &.o-tag-size-small {
+ padding: var(--o-tag-small-padding);
+ font-size: var(--o-tag-small-font-size);
+ line-height: var(--o-tag-small-line-height);
+
+ &:hover,
+ &:active {
+ @media screen and (min-width: 1100px) {
+ color: var(--o-tag-font-color);
+ border: var(--o-tag-border);
+ }
+ }
+ }
+}
diff --git a/opendesign/tag/src/tag.tsx b/opendesign/tag/src/tag.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6db151cea83381480c91733899186a40144ae0b8
--- /dev/null
+++ b/opendesign/tag/src/tag.tsx
@@ -0,0 +1,50 @@
+import { computed, defineComponent, toRefs } from 'vue';
+import { tagProps, TagProps } from './tag-types';
+import './tag.scss';
+
+export default defineComponent({
+ name: 'OTag',
+ props: tagProps,
+ emits: ['click'],
+ setup(props: TagProps, { emit, slots }) {
+ const { size, type, checked, checkable } = toRefs(props);
+
+ const classNames = computed(() => {
+ return {
+ 'o-tag': true,
+ [`o-tag-size-${size.value}`]: true,
+ [`o-tag-type-${type.value}`]: true,
+ 'o-tag-checked': checked.value,
+ 'o-tag-checkable': checkable.value,
+ };
+ });
+
+ const onClick = (e: MouseEvent) => {
+ emit('click', e);
+ };
+
+ return () => {
+ return (
+
+ {slots.default?.()}
+ {checked.value && type.value === 'primary' && (
+
+
+
+ )}
+
+ );
+ };
+ },
+});
diff --git a/opendesign/tag/src/var.scss b/opendesign/tag/src/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..82e9488a1bef33971e0ff3697dca437abd9719c9
--- /dev/null
+++ b/opendesign/tag/src/var.scss
@@ -0,0 +1,51 @@
+.o-tag {
+ // 文字颜色
+ --o-tag-font-color: var(--o-color-text4);
+ --o-tag-font-color-primary: var(--o-color-brand1);
+ --o-tag-font-color-secondary: var(--o-color-neutral4);
+ // 文字颜色 hover态，注：只有类型为outline的按钮hover时有文字颜色变化
+ --o-tag-font-color_hover: var(--o-color-brand2);
+ // 文字颜色 avtive态，注：只有类型为outline的按钮active时有文字颜色变化
+ --o-tag-font-color_active: var(--o-color-brand3);
+ --o-tag-font-color1: var(--o-color-text4);
+
+ // 背景颜色
+ --o-tag-bg-color: var(--o-color-transparent);
+ --o-tag-bg-color-primary: var(--o-color-brand1);
+ --o-tag-bg-color-secondary: var(--o-color-secondary);
+ --o-tag-bg-color-text: var(--o-color-transparent);
+ --o-tag-bg-color-disabled: var(--o-color-bg-secondary);
+
+ // 背景颜色 hover态
+ --o-tag-bg-color_hover: var(--o-color-transparent);
+ --o-tag-bg-color-primary_hover: var(--o-color-brand2);
+
+ // 背景颜色 active态
+ --o-tag-bg-color_active: var(--o-color-transparent);
+ --o-tag-bg-color-primary_active: var(--o-color-brand3);
+
+ // border
+ --o-tag-border: 1px solid var(--o-color-border1);
+ --o-tag-border-primary: 1px solid var(--o-color-brand1);
+ --o-tag-border-secondary: 1px solid var(--o-color-transparent);
+ --o-tag-border-text: 1px solid var(--o-color-transparent);
+ // border hover态
+ --o-tag-border_hover: 1px solid var(--o-color-brand2);
+ --o-tag-border-primary_hover: 1px solid var(--o-color-brand2);
+
+ // font-size
+ --o-tag-font-size: var(--o-font-size-text);
+ --o-tag-small-font-size: var(--o-font-size-tip);
+
+ // line-height
+ --o-tag-line-height: var(--o-line-height-text);
+ --o-tag-small-line-height: var(--o-line-height-tip);
+
+ // padding
+ --o-tag-padding: 3px 12px;
+ --o-tag-small-padding: 0 8px;
+ --o-tag-secondary-padding: 2px 4px;
+
+ // 特殊背景
+ --o-tag-bg-color-secondary: linear-gradient(225deg, #feb32a 0%, #f6d365 100%);
+}
diff --git a/opendesign/time-select/OTimeSelect.vue b/opendesign/time-select/OTimeSelect.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c29dffb056e68a5b306c285f42d9cefc46c16100
--- /dev/null
+++ b/opendesign/time-select/OTimeSelect.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
diff --git a/opendesign/time-select/index.ts b/opendesign/time-select/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..85804f6a542e3153d8f8e38f6dd051f8e7cd26f5
--- /dev/null
+++ b/opendesign/time-select/index.ts
@@ -0,0 +1,7 @@
+import type { App } from 'vue';
+import TimeSelect from './OTimeSelect.vue';
+TimeSelect.install = function (app: App) {
+ app.component('OTimeSelect', TimeSelect);
+};
+
+export { TimeSelect };
diff --git a/opendesign/timeline/index.ts b/opendesign/timeline/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..742ea80cb05308becec353ddc8f0c7b2620f0a68
--- /dev/null
+++ b/opendesign/timeline/index.ts
@@ -0,0 +1,8 @@
+import type { App } from 'vue';
+import Timeline from './src/timeline';
+
+Timeline.install = function (app: App) {
+ app.component(Timeline.name, Timeline);
+};
+
+export { Timeline };
diff --git a/opendesign/timeline/src/timeline-types.ts b/opendesign/timeline/src/timeline-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6b400ff1b3d2fb9cb8e83fcbb4681e4d0faa6ed6
--- /dev/null
+++ b/opendesign/timeline/src/timeline-types.ts
@@ -0,0 +1,18 @@
+import { ExtractDefaultPropTypes } from 'vue';
+
+export const timelineProps = {
+ leftArrow: {
+ type: Boolean,
+ default: true,
+ },
+ rightArrow: {
+ type: Boolean,
+ default: true,
+ },
+ modelValue: {
+ type: String,
+ default: '',
+ },
+};
+
+export type TimelineProps = ExtractDefaultPropTypes;
diff --git a/opendesign/timeline/src/timeline.scss b/opendesign/timeline/src/timeline.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f019985ed2f7e4d7b26b7940891fc44b67fab095
--- /dev/null
+++ b/opendesign/timeline/src/timeline.scss
@@ -0,0 +1,73 @@
+@import './var.scss';
+.o-timeline {
+ position: relative;
+
+ &-list {
+ display: flex;
+ justify-content: space-evenly;
+ position: relative;
+
+ &::after {
+ width: 100%;
+ height: 2px;
+ background-color: var(--o-timeline-background-color);
+ content: '';
+ display: block;
+ position: absolute;
+ top: 43px;
+ z-index: 2;
+ }
+ }
+
+ &-item {
+ position: relative;
+ z-index: 3;
+ list-style: none;
+ text-align: center;
+ cursor: pointer;
+ }
+
+ &-day {
+ font-size: var(--o-timeline-font-size);
+ color: var(--o-timeline-font-color);
+ line-height: var(--o-timeline-line-height);
+ margin-bottom: var(--o-timeline-spacing-word);
+ transition: var(--o-timeline-transition);
+ }
+ &-icon {
+ cursor: pointer;
+ width: var(--o-timeline-font-size-icon);
+ height: var(--o-timeline-font-size-icon);
+ color: var(--o-timeline-font-color);
+ display: inline-block;
+ background-color: var(--o-timeline-background-icon);
+ transition: var(--o-timeline-transition);
+ }
+ .active {
+ .o-timeline-day {
+ color: var(--o-timeline-font-color-active);
+ }
+ .o-timeline-icon {
+ color: var(--o-timeline-font-color-active);
+ }
+ }
+
+ &-left-arrow {
+ cursor: pointer;
+ position: absolute;
+ top: 28px;
+ left: -10px;
+ z-index: 4;
+ color: var(--o-timeline-background-color);
+ font-size: var(--o-timeline-font-size-icon);
+ }
+ &-right-arrow {
+ cursor: pointer;
+ position: absolute;
+ top: 28px;
+ right: -10px;
+ z-index: 4;
+ color: var(--o-timeline-background-color);
+ font-size: var(--o-timeline-font-size-icon);
+ }
+}
diff --git a/opendesign/timeline/src/timeline.tsx b/opendesign/timeline/src/timeline.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3484334ac1e87e84b2110069d47615af6d2b31db
--- /dev/null
+++ b/opendesign/timeline/src/timeline.tsx
@@ -0,0 +1,148 @@
+import { defineComponent, ref, Ref, toRefs, onMounted } from 'vue';
+import { timelineProps, TimelineProps } from './timeline-types';
+import IconLeft from '~icons/app/icon-chevron-left.svg';
+import IconRight from '~icons/app/icon-chevron-right';
+import IconChecked from '~icons/app/icon-checked.svg';
+import IconUnchecked from '~icons/app/icon-unchecked.svg';
+import './timeline.scss';
+
+export default defineComponent({
+ name: 'OTimeline',
+ props: timelineProps,
+ emits: ['update:modelValue'],
+ setup(props: TimelineProps, { emit }) {
+ const { leftArrow, rightArrow, modelValue } = toRefs(props);
+ // 六月
+ const SPLITEMONTH = 6;
+ // 时间线列表
+ const timeList: Ref = ref([]);
+ // 命中的tab
+ const activeTab = ref(5);
+ // 最左与最右阈值
+ const leftThreshold = '2020-10';
+ const rightThreshold: Ref = ref('');
+ // 时间线列表赋值
+ const changeDate = (year: number, month: number): Array => {
+ const result: Array = [];
+ if (month >= SPLITEMONTH) {
+ for (let i = 0; i < 6; i++) {
+ result.push(
+ year +
+ '-' +
+ (month - (6 - i - 1) >= 10
+ ? month - (6 - i - 1)
+ : '0' + (month - (6 - i - 1)))
+ );
+ }
+ } else {
+ // last year
+ for (let i = 1; i <= 6 - month; i++) {
+ result.push(
+ year -
+ 1 +
+ '-' +
+ (6 + i + month >= 10 ? 6 + i + month : '0' + (6 + i + month))
+ );
+ }
+ // this year
+ for (let i = 1; i < month + 1; i++) {
+ result.push(year + '-0' + i);
+ }
+ }
+ return result;
+ };
+ // 初始化时间线列表赋值
+ const initDate = () => {
+ const modelDate = !isNaN(new Date(modelValue.value).getTime())
+ ? new Date(modelValue.value)
+ : new Date();
+ const modelYear = modelDate.getFullYear();
+ const _modelYear =
+ modelDate.getFullYear() === 2020 ? 2021 : modelDate.getFullYear();
+ const modelMonth =
+ (modelYear === 2021 && modelDate.getMonth() + 1 < 3) ||
+ modelYear === 2020
+ ? 3
+ : modelDate.getMonth() + 1;
+ const year = new Date().getFullYear();
+ const month = new Date().getMonth() + 1;
+ rightThreshold.value = year + '-' + (month >= 10 ? month : '0' + month);
+ timeList.value = changeDate(_modelYear, modelMonth);
+ emit('update:modelValue', timeList.value[activeTab.value]);
+ };
+ // 点击时间线tab
+ const useClickTab = (index: number): void => {
+ activeTab.value = index;
+ emit('update:modelValue', timeList.value[activeTab.value]);
+ };
+ // 点击左侧按钮
+ const useClickLeft = () => {
+ const date = new Date(timeList.value[4]);
+ const year = date.getFullYear();
+ const month = date.getMonth() + 1;
+ timeList.value = changeDate(year, month);
+ emit('update:modelValue', timeList.value[activeTab.value]);
+ };
+ // 点击右侧按钮
+ const useClickRight = () => {
+ const date = new Date(timeList.value[5]);
+ const year = date.getFullYear();
+ const month = date.getMonth() + 2;
+ timeList.value =
+ month <= 12 ? changeDate(year, month) : changeDate(year + 1, 1);
+ emit('update:modelValue', timeList.value[activeTab.value]);
+ };
+
+ onMounted(() => {
+ initDate();
+ });
+
+ return () => {
+ return (
+
+ {leftArrow &&
+ leftArrow.value &&
+ timeList.value[0] !== leftThreshold ? (
+
useClickLeft()}
+ class="o-timeline-left-arrow"
+ >
+ ) : (
+ ''
+ )}
+
+ {timeList.value &&
+ timeList.value.map((item, index) => {
+ return (
+ - useClickTab(index)}
+ >
+
{item}
+ {index === activeTab.value ? (
+
+ ) : (
+
+ )}
+
+ );
+ })}
+
+ {rightArrow &&
+ rightArrow.value &&
+ timeList.value[5] !== rightThreshold.value ? (
+
useClickRight()}
+ >
+ ) : (
+ ''
+ )}
+
+