diff --git a/view/dist.rar b/view/dist.rar new file mode 100644 index 0000000000000000000000000000000000000000..a2a3bea10df7199ea2eab0bf1938c10cc3280a64 Binary files /dev/null and b/view/dist.rar differ diff --git a/view/package.json b/view/package.json index 2534d533bc3a6be4ffc7b9ab8d07491dd816e01b..f0a9fb13e8aa887eb8a4b1f3b559184328f6adde 100644 --- a/view/package.json +++ b/view/package.json @@ -18,7 +18,7 @@ "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-router": "~5.0.0", "@vue/cli-service": "~5.0.0", - "node-sass": "^7.0.1", + "node-sass": "~7.0.1", "postcss-px2rem": "^0.3.0", "postcss-pxtorem": "^6.0.0", "px2rem-loader": "^0.1.9", @@ -31,4 +31,4 @@ "not dead", "not ie 11" ] -} +} \ No newline at end of file diff --git a/view/src/assets/2022_plan.png b/view/src/assets/2022_plan.png new file mode 100644 index 0000000000000000000000000000000000000000..727a7cb389e77a8f7ebc688784622193bbece4ca Binary files /dev/null and b/view/src/assets/2022_plan.png differ diff --git a/view/src/components/MiniDocs.vue b/view/src/components/MiniDocs.vue index e253f2487c47650509aaca438f9145d546ede00e..35715c8732f1db58e3fd4cc268140a0470b3f9ca 100644 --- a/view/src/components/MiniDocs.vue +++ b/view/src/components/MiniDocs.vue @@ -2,8 +2,7 @@
- {{ $t(title) }} - {{ link }} + {{ $t(title) }}
@@ -63,11 +62,6 @@ const goLink = (path) => { .title { font-weight: 600; - } - - .link { - font-size: 14px; - color: rgba(0, 0, 0, .5); &:hover { color: #357aef; diff --git a/view/src/icon_font/demo.css b/view/src/icon_font/demo.css new file mode 100644 index 0000000000000000000000000000000000000000..a67054a0a030993643b8cbe9f344b34706efa134 --- /dev/null +++ b/view/src/icon_font/demo.css @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.helps { + margin-top: 40px; +} + +.helps pre { + padding: 20px; + margin: 10px 0; + border: solid 1px #e7e1cd; + background-color: #fffdef; + overflow: auto; +} + +.icon_lists { + width: 100% !important; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.markdown { + color: #666; + font-size: 14px; + line-height: 1.8; +} + +.highlight { + line-height: 1.5; +} + +.markdown img { + vertical-align: middle; + max-width: 100%; +} + +.markdown h1 { + color: #404040; + font-weight: 500; + line-height: 40px; + margin-bottom: 24px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #404040; + margin: 1.6em 0 0.6em 0; + font-weight: 500; + clear: both; +} + +.markdown h1 { + font-size: 28px; +} + +.markdown h2 { + font-size: 22px; +} + +.markdown h3 { + font-size: 16px; +} + +.markdown h4 { + font-size: 14px; +} + +.markdown h5 { + font-size: 12px; +} + +.markdown h6 { + font-size: 12px; +} + +.markdown hr { + height: 1px; + border: 0; + background: #e9e9e9; + margin: 16px 0; + clear: both; +} + +.markdown p { + margin: 1em 0; +} + +.markdown>p, +.markdown>blockquote, +.markdown>.highlight, +.markdown>ol, +.markdown>ul { + width: 80%; +} + +.markdown ul>li { + list-style: circle; +} + +.markdown>ul li, +.markdown blockquote ul>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown>ul li p, +.markdown>ol li p { + margin: 0.6em 0; +} + +.markdown ol>li { + list-style: decimal; +} + +.markdown>ol li, +.markdown blockquote ol>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown code { + margin: 0 3px; + padding: 0 5px; + background: #eee; + border-radius: 3px; +} + +.markdown strong, +.markdown b { + font-weight: 600; +} + +.markdown>table { + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + border: 1px solid #e9e9e9; + width: 95%; + margin-bottom: 24px; +} + +.markdown>table th { + white-space: nowrap; + color: #333; + font-weight: 600; +} + +.markdown>table th, +.markdown>table td { + border: 1px solid #e9e9e9; + padding: 8px 16px; + text-align: left; +} + +.markdown>table th { + background: #F7F7F7; +} + +.markdown blockquote { + font-size: 90%; + color: #999; + border-left: 4px solid #e9e9e9; + padding-left: 0.8em; + margin: 1em 0; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown .waiting { + color: #ccc; +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown>br, +.markdown>p>br { + clear: both; +} + + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/view/src/icon_font/demo_index.html b/view/src/icon_font/demo_index.html new file mode 100644 index 0000000000000000000000000000000000000000..ab12218bcad1e79b814561b536da2dcbbf65ded4 --- /dev/null +++ b/view/src/icon_font/demo_index.html @@ -0,0 +1,326 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+
    +
  • Unicode
    • +
  • Font class
    • +
  • Symbol
    • +
+ + 查看项目 + +
+
+
+
    + +
  • + +
    操作_自动亮度
    +
    
    +
    • + +
  • + s +
    24gf-shieldCheck
    +
    s
    +
    • + +
  • + +
    配合工作
    +
    
    +
    • + +
  • + +
    配置-终端配置
    +
    
    +
    • + +
  • + +
    施工配合
    +
    
    +
    • + +
  • + +
    开箱即用
    +
    
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1663574053333') format('woff2'),
+       url('iconfont.woff?t=1663574053333') format('woff'),
+       url('iconfont.ttf?t=1663574053333') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 操作_自动亮度 +
    +
    .icon-caozuo_zidongliangdu +
    +
    • + +
  • + +
    + 24gf-shieldCheck +
    +
    .icon-safe +
    +
    • + +
  • + +
    + 配合工作 +
    +
    .icon-peihegongzuo +
    +
    • + +
  • + +
    + 配置-终端配置 +
    +
    .icon-peizhi-zhongduanpeizhi +
    +
    • + +
  • + +
    + 施工配合 +
    +
    .icon-shigongpeihe +
    +
    • + +
  • + +
    + 开箱即用 +
    +
    .icon-kaixiangjiyong +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    操作_自动亮度
    +
    #icon-caozuo_zidongliangdu
    +
    • + +
  • + +
    24gf-shieldCheck
    +
    #icon-safe
    +
    • + +
  • + +
    配合工作
    +
    #icon-peihegongzuo
    +
    • + +
  • + +
    配置-终端配置
    +
    #icon-peizhi-zhongduanpeizhi
    +
    • + +
  • + +
    施工配合
    +
    #icon-shigongpeihe
    +
    • + +
  • + +
    开箱即用
    +
    #icon-kaixiangjiyong
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git a/view/src/icon_font/iconfont.css b/view/src/icon_font/iconfont.css new file mode 100644 index 0000000000000000000000000000000000000000..25f57022c6876493d98512ec251fb192051b67b1 --- /dev/null +++ b/view/src/icon_font/iconfont.css @@ -0,0 +1,39 @@ +@font-face { + font-family: "iconfont"; /* Project id 3657066 */ + src: url('iconfont.woff2?t=1663574053333') format('woff2'), + url('iconfont.woff?t=1663574053333') format('woff'), + url('iconfont.ttf?t=1663574053333') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-caozuo_zidongliangdu:before { + content: "\e670"; +} + +.icon-safe:before { + content: "\73"; +} + +.icon-peihegongzuo:before { + content: "\e654"; +} + +.icon-peizhi-zhongduanpeizhi:before { + content: "\e61b"; +} + +.icon-shigongpeihe:before { + content: "\e6b9"; +} + +.icon-kaixiangjiyong:before { + content: "\e627"; +} + diff --git a/view/src/icon_font/iconfont.js b/view/src/icon_font/iconfont.js new file mode 100644 index 0000000000000000000000000000000000000000..f3371a9619e8af871db92ef57163d6cdb6c9cc0c --- /dev/null +++ b/view/src/icon_font/iconfont.js @@ -0,0 +1 @@ +window._iconfont_svg_string_3657066='',function(e){var c=(c=document.getElementsByTagName("script"))[c.length-1],t=c.getAttribute("data-injectcss"),c=c.getAttribute("data-disable-injectsvg");if(!c){var l,i,n,o,a,h=function(c,t){t.parentNode.insertBefore(c,t)};if(t&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}l=function(){var c,t=document.createElement("div");t.innerHTML=e._iconfont_svg_string_3657066,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(c=document.body).firstChild?h(t,c.firstChild):c.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),l()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(n=l,o=e.document,a=!1,s(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,d())})}function d(){a||(a=!0,n())}function s(){try{o.documentElement.doScroll("left")}catch(c){return void setTimeout(s,50)}d()}}(window); \ No newline at end of file diff --git a/view/src/icon_font/iconfont.json b/view/src/icon_font/iconfont.json new file mode 100644 index 0000000000000000000000000000000000000000..fbf4a7ad63d4743e3573f3815ee04bae170741a4 --- /dev/null +++ b/view/src/icon_font/iconfont.json @@ -0,0 +1,51 @@ +{ + "id": "3657066", + "name": "nestos", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "1297942", + "name": "操作_自动亮度", + "font_class": "caozuo_zidongliangdu", + "unicode": "e670", + "unicode_decimal": 58992 + }, + { + "icon_id": "7577443", + "name": "24gf-shieldCheck", + "font_class": "safe", + "unicode": "73", + "unicode_decimal": 115 + }, + { + "icon_id": "8651696", + "name": "配合工作", + "font_class": "peihegongzuo", + "unicode": "e654", + "unicode_decimal": 58964 + }, + { + "icon_id": "17523090", + "name": "配置-终端配置", + "font_class": "peizhi-zhongduanpeizhi", + "unicode": "e61b", + "unicode_decimal": 58907 + }, + { + "icon_id": "18468106", + "name": "施工配合", + "font_class": "shigongpeihe", + "unicode": "e6b9", + "unicode_decimal": 59065 + }, + { + "icon_id": "18748999", + "name": "开箱即用", + "font_class": "kaixiangjiyong", + "unicode": "e627", + "unicode_decimal": 58919 + } + ] +} diff --git a/view/src/icon_font/iconfont.ttf b/view/src/icon_font/iconfont.ttf new file mode 100644 index 0000000000000000000000000000000000000000..73af3970607058e0bbd749dba1ef8e307a462331 Binary files /dev/null and b/view/src/icon_font/iconfont.ttf differ diff --git a/view/src/icon_font/iconfont.woff b/view/src/icon_font/iconfont.woff new file mode 100644 index 0000000000000000000000000000000000000000..b0c58d678a760493b50cba1ea6bcf2895fa9cae4 Binary files /dev/null and b/view/src/icon_font/iconfont.woff differ diff --git a/view/src/icon_font/iconfont.woff2 b/view/src/icon_font/iconfont.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..a48bf74508293fec76d0bc86c4feaee23f5164d4 Binary files /dev/null and b/view/src/icon_font/iconfont.woff2 differ diff --git a/view/src/lang/en.js b/view/src/lang/en.js index a7d6e6f47f5c6ab5915a925ba8ad99066d521d75..162fd9f326e6675ebc96d7c261581425371f09c4 100644 --- a/view/src/lang/en.js +++ b/view/src/lang/en.js @@ -11,19 +11,33 @@ export default { description: 'NestOS cloud base operating system integrates RPM-Ostree support, IGNITION configuration and other technologies, adopts the design idea of dual-system partitioning and atomization update, and uses Nestos-Assembler to quickly integrate and build. It also ADAPTS to K8S, openStack, OKD and other platforms to optimize the bottom noise of container operation. Compared with CENTOS8, the startup speed of container is increased by 30% and the creation speed of container is increased by 60%, which is suitable for the basic operation environment of cloud scenarios mainly based on containerized applications.' }, minititle: { + planIn: 'programme', + planOut: 'PROGRAMME', archIn: 'ARCHITECTURE', archOut: 'ARCHITECTURE', + comIn: 'comparision', + comOut: 'COMPARISION', docIn: 'DOCUMENTATION', docOut: 'DOCUMENTATION', resourceIn: 'RESOURCE', resourceOut: 'RESOURCE', }, arch: { - character1: '1. Out of the box container platform: container technology overcomes the user to modify the system configuration, user service system components to rely on conflicts lead to massive cluster service operations difficult problem, at the same time can be quickly installed deployment, according to the service load and convenient real-time extension contraction and node when the operational service smooth migration, is the basis of the most important core cloud native times. Current mainstream general server operating systems need to be installed and deployed before adjusting cloud scenario adaptation. NestOS integrates with mainstream container engines such as iSulad, Docker, Podman, and CLI-O, which can provide users with a lightweight and customized cloud scenario operating system out of the box.', - character2: '2. Easy to use installation and configuration process: NestOS uses Ignition technology, which can easily complete the installation and configuration of a large number of cluster nodes with the same configuration. Ignition is a distribution-neutral configuration utility for installing and configuring systems and initializing NestOS. The Ignition profile can include configuration for networking, storage, file systems, SystemD units, and user authentication and rights management. During the installation phase, you can manually run the nestos-installer command after booting up the installation image, load the Ignition configuration file, and complete the local installation of NestOS. You can also add the remote Ignition configuration access address to the boot parameters through PXE to realize the network boot installation of a large number of cluster nodes.', - character3: '3. Secure and reliable package management: NestOS uses RPM-Ostree for package management. Rpm-ostree can be regarded as the combination of RPM and Ostree. On the one hand, Rpm- Ostree provides a way to install and manage software packages based on Rpm, and on the other hand, it provides an update and upgrade of operating system based on Ostree. Each user updates the system as if RPM-ostree commits a "Transaction," ensuring that all updates succeed or fail, and allowing rollback to the pre-update state if the update system encounters an exception.', - character4: '4. Friendly and controllable automatic update mechanism: NestOS provides automatic update service. As a client of remote update service and RPM-Ostree, NestOS is responsible for detecting whether there is an updated version in the update server and realizing automatic update and reboot of nodes. The service support automatic update agent, user-defined configuration files, and a variety of update strategy, whether the user can automatically update, automatic update strategy options such as configuration, also can be combined with the upper cluster service, will serve the current node load migration after any update, realize the cluster nodes and orderly, ensure the cluster service is not interrupted by the nodes to upgrade. When cluster nodes need to modify their configurations or update the basic environment, release the verified version to the update server. The cluster nodes will be upgraded through the automatic update mechanism.', - character5: '5. Closely matched dual system partitions: NestOS uses a dual system partition design, with the two partitions set to active and passive modes, respectively, and each performing its duties during system operation. The active partition is responsible for system operation and the passive partition is responsible for system upgrade. Meanwhile, the active partition is set to read-only state during system operation to ensure the integrity and security during NestOS operation. When a new version release of the operating system, a complete file system will be downloaded to passive partition, and restart the system boot from the new version of partition starts, the original passive partition will switch to active partitions, while the active partition before be switch to a passive partitions, the role of two partitions will switch to each other, waiting for the next update system.', + title1: 'Out of the box container platform', + title2: 'Easy to use installation and configuration process', + title3: 'Secure and reliable package management', + title4: 'Friendly and controllable automatic update mechanism', + title5: 'Closely matched dual system partitions', + character1: 'container technology overcomes the user to modify the system configuration, user service system components to rely on conflicts lead to massive cluster service operations difficult problem, at the same time can be quickly installed deployment, according to the service load and convenient real-time extension contraction and node when the operational service smooth migration, is the basis of the most important core cloud native times. Current mainstream general server operating systems need to be installed and deployed before adjusting cloud scenario adaptation. NestOS integrates with mainstream container engines such as iSulad, Docker, Podman, and CLI-O, which can provide users with a lightweight and customized cloud scenario operating system out of the box.', + character2: 'NestOS uses Ignition technology, which can easily complete the installation and configuration of a large number of cluster nodes with the same configuration. Ignition is a distribution-neutral configuration utility for installing and configuring systems and initializing NestOS. The Ignition profile can include configuration for networking, storage, file systems, SystemD units, and user authentication and rights management. During the installation phase, you can manually run the nestos-installer command after booting up the installation image, load the Ignition configuration file, and complete the local installation of NestOS. You can also add the remote Ignition configuration access address to the boot parameters through PXE to realize the network boot installation of a large number of cluster nodes.', + character3: 'NestOS uses RPM-Ostree for package management. Rpm-ostree can be regarded as the combination of RPM and Ostree. On the one hand, Rpm- Ostree provides a way to install and manage software packages based on Rpm, and on the other hand, it provides an update and upgrade of operating system based on Ostree. Each user updates the system as if RPM-ostree commits a "Transaction," ensuring that all updates succeed or fail, and allowing rollback to the pre-update state if the update system encounters an exception.', + character4: 'NestOS provides automatic update service. As a client of remote update service and RPM-Ostree, NestOS is responsible for detecting whether there is an updated version in the update server and realizing automatic update and reboot of nodes. The service support automatic update agent, user-defined configuration files, and a variety of update strategy, whether the user can automatically update, automatic update strategy options such as configuration, also can be combined with the upper cluster service, will serve the current node load migration after any update, realize the cluster nodes and orderly, ensure the cluster service is not interrupted by the nodes to upgrade. When cluster nodes need to modify their configurations or update the basic environment, release the verified version to the update server. The cluster nodes will be upgraded through the automatic update mechanism.', + character5: 'NestOS uses a dual system partition design, with the two partitions set to active and passive modes, respectively, and each performing its duties during system operation. The active partition is responsible for system operation and the passive partition is responsible for system upgrade. Meanwhile, the active partition is set to read-only state during system operation to ensure the integrity and security during NestOS operation. When a new version release of the operating system, a complete file system will be downloaded to passive partition, and restart the system boot from the new version of partition starts, the original passive partition will switch to active partitions, while the active partition before be switch to a passive partitions, the role of two partitions will switch to each other, waiting for the next update system.', + }, + compare: { + desc: '使用 NestOS beta 版本横向对比 openEuler21.09、openEuler20.03LTS、Centos8 系统运行 iSulad2.0.10 容器引擎性能。', + iSulad_x86: 'iSulad（x86_64）测试结果如下：', + iSulad_arch: 'iSulad（aarch64）测试结果如下：' }, resource: { mirror: 'Mirror', diff --git a/view/src/lang/zh.js b/view/src/lang/zh.js index bc85fd8262d15798004715a77ceb4aeff8e0bbc6..174fdad3ebca4d375067a2dab45c1fb55708fae1 100644 --- a/view/src/lang/zh.js +++ b/view/src/lang/zh.js @@ -11,19 +11,33 @@ export default { description: 'NestOS云底座操作系统，集成了rpm-ostree支持、ignition配置等技术，采用双系分区、原子化更新的设计思路，使用nestos-assembler快速集成构建。并针对K8S、openStack、OKD等平台进行适配，优化容器运行底噪，与centos8相比容器启动速度提升了30%，容器创建速度提升了60%，适合作为以容器化应用为主的云场景基础运行环境。' }, minititle: { + planIn: '年度规划', + planOut: 'PROGRAMME', archIn: '架构', archOut: 'ARCHITECTURE', + comIn: '性能对比', + comOut: 'COMPARISION', docIn: '文档', docOut: 'DOCUMENTATION', resourceIn: '资源', resourceOut: 'RESOURCE', }, arch: { - character1: '1.开箱即用的容器平台：容器技术克服了用户修改系统配置、用户服务对系统组件依赖冲突等导致大规模集群服务运维困难的问题，同时可以快速的安装部署、根据服务负载方便的实时扩展收缩以及节点运维时服务平滑迁移，是云原生时代最重要的基础核心。当前主流通用服务器操作系统需要安装部署后再次进行云场景适配调整，而 NestOS 集成适配了 iSulad、Docker、Podman 、cri-o 等主流容器引擎，做到开箱即用，可为用户提供一种轻量级、定制化的云场景操作系统。', - character2: '2.简单易用的安装配置过程：NestOS 采用了 Ignition 技术，可以以相同配置方便地完成大批量集群节点安装配置工作。Ignition 是一个与分发无关的配置实用程序，用于系统的安装和配置并初始化 NestOS。Ignition 配置文件中可以包含对网络、存储、文件系统、systemd 单元和用户鉴权及权限管理等配置。安装阶段，NestOS 既支持引导启动安装镜像后手动运行 nestos-installer 命令，加载 Ignition 配置文件，完成 NestOS 本地安装；也可通过 PXE 方式，在启动引导参数中添加远程 Ignition 配置访问地址，实现大批量集群节点网络引导方式安装。', - character3: '3.安全可靠的包管理方式：NestOS 使用 rpm-ostree 进行软件包管理，rpm-ostree 可以看成是 rpm 和 ostree 的合体。Rpm-ostree 一方面提供了基于 rpm 的软件包安装管理方式，另一方面提供了基于 ostree 的操作系统更新升级。用户每次对系统更新都像是 rpm-ostree 在提交一次“Transaction”，确保更新过程全部成功或全部失败，并允许在更新系统遇到异常后回滚到更新前状态。', - character4: '4.友好可控的自动更新机制：NestOS 提供自动更新服务，它作为远程更新服务和 rpm-ostree 的客户端，负责检测更新服务器是否存在更新版本，实现节点自动更新与重新引导。该服务支持自动更新代理、用户自定义配置文件和多种更新策略，用户可对是否自动更新、自动更新策略等选项进行配置，也可与上层集群服务相结合，将当前节点服务负载迁移后再行更新，实现集群节点有序升级，保证集群服务不因节点升级而中断。当集群节点需统一进行配置修改或基础环境更新时，可将修改完毕充分验证后的更新版本发布至更新服务器，集群节点将通过自动更新机制完成统一升级。', - character5: '5.紧密配合的双系统分区：NestOS 采用双系统分区设计，两个分区分别被设置为主动模式和被动模式，并在系统运行期间各司其职。主动分区负责系统运行，被动分区负责系统升级，同时在系统运行期间主动分区被设置成只读状态，确保 NestOS 运行期间的完整性与安全性。当新版本操作系统发布时，一个完整的文件系统将被下载至被动分区，并在系统重启引导时从新版本分区启动，原来的被动分区将切换为主动分区，而之前的主动分区则被切换为被动分区，两个分区扮演的角色将相互对调，等待下一次系统更新。', + title1: '开箱即用的容器平台', + title2: '简单易用的安装配置过程', + title3: '安全可靠的包管理方式', + title4: '友好可控的自动更新机制', + title5: '紧密配合的双系统分区', + character1: '容器技术克服了用户修改系统配置、用户服务对系统组件依赖冲突等导致大规模集群服务运维困难的问题，同时可以快速的安装部署、根据服务负载方便的实时扩展收缩以及节点运维时服务平滑迁移，是云原生时代最重要的基础核心。当前主流通用服务器操作系统需要安装部署后再次进行云场景适配调整，而 NestOS 集成适配了 iSulad、Docker、Podman 、cri-o 等主流容器引擎，做到开箱即用，可为用户提供一种轻量级、定制化的云场景操作系统。', + character2: 'NestOS 采用了 Ignition 技术，可以以相同配置方便地完成大批量集群节点安装置工作。Ignition 是一个与分发无关的配置实用程序，用于系统的安装和配置并初始化 NestOS。Ignition 配置文件中可以包含对网络、存储、文件系统、systemd 单元和用户鉴权及权限管理等配置。安装阶段，NestOS 既支持引导启动安装镜像后手动运行 nestos-installer 命令，加载 Ignition 配置文件，完成 NestOS 本地安装；也可通过 PXE 方式，在启动引导参数中添加远程 Ignition 配置访问地址，实现大批量集群节点网络引导方式安装。', + character3: 'NestOS 使用 rpm-ostree 进行软件包管理，rpm-ostree 可以看成是 rpm 和 ostree 的合体。Rpm-ostree 一方面提供了基于 rpm 的软件包安装管理方式，另一方面提供了基于 ostree 的操作系统更新升级。用户每次对系统更新都像是 rpm-ostree 在提交一次“Transaction”，确保更新过程全部成功或全部失败，并允许在更新系统遇到异常后回滚到更新前状态。', + character4: 'NestOS 提供自动更新服务，它作为远程更新服务和 rpm-ostree 的客户端，负责检测更新服务器是否存在更新版本，实现节点自动更新与重新引导。该服务支持自动更新代理、用户自定义配置文件和多种更新策略，用户可对是否自动更新、自动更新策略等选项进行配置，也可与上层集群服务相结合，将当前节点服务负载迁移后再行更新，实现集群节点有序升级，保证集群服务不因节点升级而中断。当集群节点需统一进行配置修改或基础环境更新时，可将修改完毕充分验证后的更新版本发布至更新服务器，集群节点将通过自动更新机制完成统一升级。', + character5: 'NestOS 采用双系统分区设计，两个分区分别被设置为主动模式和被动模式，并在系统运行期间各司其职。主动分区负责系统运行，被动分区负责系统升级，同时在系统运行期间主动分区被设置成只读状态，确保 NestOS 运行期间的完整性与安全性。当新版本操作系统发布时，一个完整的文件系统将被下载至被动分区，并在系统重启引导时从新版本分区启动，原来的被动分区将切换为主动分区，而之前的主动分区则被切换为被动分区，两个分区扮演的角色将相互对调，等待下一次系统更新。', + }, + compare: { + desc: '使用 NestOS beta 版本横向对比 openEuler21.09、openEuler20.03LTS、Centos8 系统运行 iSulad2.0.10 容器引擎性能。', + iSulad_x86: 'iSulad（x86_64）测试结果如下：', + iSulad_arch: 'iSulad（aarch64）测试结果如下：' }, resource: { mirror: '镜像', diff --git a/view/src/main.js b/view/src/main.js index 8245978655e5332ec49819e568fb256e05a45157..7f15a1b91b2144ae05b14c826a8bf1391ac048cf 100644 --- a/view/src/main.js +++ b/view/src/main.js @@ -7,6 +7,8 @@ import "../node_modules/aos/dist/aos.css"; import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; import './styles/main.scss'; +import './icon_font/iconfont.js'; +import './icon_font/iconfont.css'; import '@/utils/rem' createApp(App).use(router).use(ElementPlus).use(i18n).mount('#app') diff --git a/view/src/utils/resource.js b/view/src/utils/resource.js index 32f63c1f8e22d4255d66c6eed099dee0d31089e1..8bdccf7df1eb2c0db35c73e1e627bd37fa5afcb8 100644 --- a/view/src/utils/resource.js +++ b/view/src/utils/resource.js @@ -5,11 +5,25 @@ export const docList = [ { dateTitle: '2022-03-29', - x86List: ['http://124.126.103.127/nestos20220329/x86_64/nestos-22.03.20220329.dev.0-live.x86_64.iso', - 'http://124.126.103.127/nestos20220329/x86_64/nestos-22.03.20220329.dev.0-qemu.x86_64.qcow2', + x86List: [ + { + name: 'NestOS-22.03 ISO下载', + path: 'http://124.126.103.127/nestos20220329/x86_64/nestos-22.03.20220329.dev.0-live.x86_64.iso' + }, + { + name: 'NestOS-22.03 QCOW2下载', + path: 'http://124.126.103.127/nestos20220329/x86_64/nestos-22.03.20220329.dev.0-qemu.x86_64.qcow2' + }, ], - armList: [' http://124.126.103.127/nestos20220329/aarch64/nestos-22.03.20220329.dev.0-live.aarch64.iso', - ' http://124.126.103.127/nestos20220329/aarch64/nestos-22.03.20220329.dev.0-qemu.aarch64.qcow2', + armList: [ + { + name: 'NestOS-22.03 ISO下载', + path: 'http://124.126.103.127/nestos20220329/aarch64/nestos-22.03.20220329.dev.0-live.aarch64.iso' + }, + { + name: 'NestOS-22.03 QCOW2下载', + path: 'http://124.126.103.127/nestos20220329/aarch64/nestos-22.03.20220329.dev.0-qemu.aarch64.qcow2' + }, ] }, ] @@ -19,10 +33,15 @@ export const docList = [ */ export const docFile = [ { + title: `resource.file.doc`, // 界面文字 + link: 'http://124.126.103.127/doc/NestOS.pdf', //下载链接 + IMG: require('@/assets/resource/illustration-file.png') //背景图小图 + }, + /* { title: `resource.file.doc`, - link: 'http://124.126.103.127/doc/NestOS.pdf', - IMG: require('@/assets/resource/illustration-file.png') - } + link: 'http://124.126.103.127/doc/xxx.pdf', + IMG: require('@/assets/resource/illustration-xxx.png') + } */ ] /* diff --git a/view/src/views/Architecture.vue b/view/src/views/Architecture.vue index 364404a93c3342a5b79a4ea9e479c29d8c248d03..443ff69f0610591b757065fb273a0846e21184e4 100644 --- a/view/src/views/Architecture.vue +++ b/view/src/views/Architecture.vue @@ -1,13 +1,20 @@ @@ -20,16 +27,51 @@ text-align: center; .character { - padding: 40px; - - p { - padding-top: 16px; - font-size: 14px; - text-align: left; - text-indent: 1rem; - line-height: 22px; - // border-bottom: 1px dashed gray; + padding: 4px; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-evenly; + + &-item { + width: 28%; + height: 280px; + margin: 20px 0; + padding: 6px 16px; + display: flex; + flex-direction: column; + align-items: center; + overflow: hidden; + border: 1px dashed gray; + + &-img { + display: flex; + align-items: center; + width: 20%; + height: 20%; + + .icon { + width: 100%; + height: 100%; + } + } + + &-title { + display: inline-block; + font-size: 18px; + padding: 10px 0; + font-weight: bold; + color: #4d4949; + } + + &-desc { + display: inline-block; + font-size: 14px; + text-align: left; + // text-indent: 2rem; + } } + } .archImg { diff --git a/view/src/views/Comparision.vue b/view/src/views/Comparision.vue new file mode 100644 index 0000000000000000000000000000000000000000..1e0143b69a512b12dff10f256e19647a93944c52 --- /dev/null +++ b/view/src/views/Comparision.vue @@ -0,0 +1,59 @@ + + + + + \ No newline at end of file diff --git a/view/src/views/HomeView.vue b/view/src/views/HomeView.vue index 30c784717d6e4b93a722d0919c2d427df31830b9..2df028f1b1ca1b58a22ae3260083e400c05e5f3d 100644 --- a/view/src/views/HomeView.vue +++ b/view/src/views/HomeView.vue @@ -7,12 +7,18 @@
-

{{ $t(`card.description`) }}

+

{{ $t(`card.description`) }}

+ + + + + +
@@ -30,6 +36,7 @@ import vFooter from '@/components/Footer.vue'; import vBanner from './Banner.vue'; import vCards from './Cards.vue'; import vArchitecture from './Architecture.vue'; +import vComparision from './Comparision.vue'; import vResource from './Resource.vue'; import { onMounted } from 'vue'; import AOS from 'aos'; @@ -70,6 +77,10 @@ const handleScroll = () => { margin: 0 auto; padding: 3% 0; + .roadmap { + width: 100%; + } + .description { width: 100%; font-size: 14px; diff --git a/view/src/views/resources/document.vue b/view/src/views/resources/document.vue index 926635055184784dae13cfbfce5a0ac002b11d42..aab9ae32db192882c1b41a18f6dbaaac31bda727 100644 --- a/view/src/views/resources/document.vue +++ b/view/src/views/resources/document.vue @@ -1,14 +1,23 @@ \ No newline at end of file diff --git a/view/src/views/resources/mirror.vue b/view/src/views/resources/mirror.vue index af92ea6f2a7b75e68ad0dd0827491c777a0576a2..c6fbabaefaf3e4b51eae819e0920a943aa395256 100644 --- a/view/src/views/resources/mirror.vue +++ b/view/src/views/resources/mirror.vue @@ -6,7 +6,7 @@
@@ -14,10 +14,10 @@ aarch64
- {{ link }} + {{ link.name }}
- {{ link }} + {{ link.name }}
diff --git a/view/src/views/resources/other.vue b/view/src/views/resources/other.vue index 8e5dc66aeb5c6d5b058302b6289e8381549388ea..13a4ce920ebe712c13c1ae8bcc87a1bbf63103fa 100644 --- a/view/src/views/resources/other.vue +++ b/view/src/views/resources/other.vue @@ -1,7 +1,7 @@