Skip to content

B
bkunyun
Commit 84a97fd0 authored by chenshouchao's avatar chenshouchao
Browse files
Options

Merge branch 'feat-20221012-environment' into 'release' 

cn-Feat 20221012 environment

See merge request !145
parents 92032f79 567ba4cd
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2972 additions and 46 deletions
package-lock.json
View file @ 84a97fd0
This diff is collapsed.
package.json
View file @ 84a97fd0
This diff is collapsed.
public/iconfont/demo.css 0 → 100644
View file @ 84a97fd0
/* 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;
}
public/iconfont/demo_index.html 0 → 100644
View file @ 84a97fd0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
<style>
.main .logo {
margin-top: 0;
height: auto;
}
.main .logo a {
display: flex;
align-items: center;
}
.main .logo .sub-title {
margin-left: 0.5em;
font-size: 22px;
color: #fff;
background: linear-gradient(-45deg, #3967FF, #B500FE);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3701233" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe607;</span>
<div class="name">点赞</div>
<div class="code-name">&amp;#xe607;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9b2;</span>
<div class="name">搜索-223</div>
<div class="code-name">&amp;#xe9b2;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
<ul>
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
</ul>
<blockquote>
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
</blockquote>
<p>Unicode 使用步骤如下：</p>
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1665568301019') format('woff2'),
url('iconfont.woff?t=1665568301019') format('woff'),
url('iconfont.ttf?t=1665568301019') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-dianzan"></span>
<div class="name">
点赞
</div>
<div class="code-name">.icon-dianzan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-sousuo-223"></span>
<div class="name">
搜索-223
</div>
<div class="code-name">.icon-sousuo-223
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
<p>与 Unicode 使用方式相比，具有如下特点：</p>
<ul>
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dianzan"></use>
</svg>
<div class="name">点赞</div>
<div class="code-name">#icon-dianzan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-sousuo-223"></use>
</svg>
<div class="name">搜索-223</div>
<div class="code-name">#icon-sousuo-223</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
<ul>
<li>支持多色图标了，不再受单色限制。</li>
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>
public/iconfont/iconfont.css 0 → 100644
View file @ 84a97fd0
@font-face {
font-family: "iconfont"; /* Project id 3701233 */
src: url('iconfont.woff2?t=1665568301019') format('woff2'),
url('iconfont.woff?t=1665568301019') format('woff'),
url('iconfont.ttf?t=1665568301019') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-dianzan:before {
content: "\e607";
}
.icon-sousuo-223:before {
content: "\e9b2";
}
public/iconfont/iconfont.js 0 → 100644
View file @ 84a97fd0
window._iconfont_svg_string_3701233='<svg><symbol id="icon-dianzan" viewBox="0 0 1064 1024"><path d="M204.8 440.32a30.72 30.72 0 0 0-30.72 30.72v368.64c0 16.95744 13.76256 30.72 30.72 30.72h51.2v-430.08H204.8z m-133.12 30.72A133.12 133.12 0 0 1 204.8 337.92h102.4c28.2624 0 51.2 22.9376 51.2 51.2v532.48c0 28.2624-22.9376 51.2-51.2 51.2H204.8a133.12 133.12 0 0 1-133.12-133.12v-368.64z" fill="#1D1D1F" ></path><path d="M512.94208 140.41088c-23.18336 71.35232-57.42592 138.89536-89.45664 190.0544-16.384 26.17344-32.80896 48.98816-47.59552 66.31424-7.3728 8.6016-14.99136 16.62976-22.65088 23.26528-6.10304 5.24288-18.0224 14.82752-33.5872 18.75968a51.2 51.2 0 0 1-33.01376-96.58368c2.4576-2.12992 6.26688-5.98016 11.38688-12.00128 10.6496-12.45184 24.1664-30.88384 38.66624-54.14912 29.12256-46.4896 60.2112-108.29824 80.32256-171.86816 7.08608-22.28224 23.7568-45.99808 52.18304-56.89344 47.5136-18.18624 125.7472-27.27936 172.60544 40.50944 21.01248 30.43328 30.22848 70.41024 30.3104 117.30944 0.08192 32.11264-4.096 69.30432-12.98432 112.31232h167.1168c46.61248 0 101.82656 19.0464 130.37568 70.8608 60.66176 110.01856 85.1968 302.4896-81.79712 521.17504-32.31744 42.27072-82.3296 63.32416-131.8912 63.32416H307.2a51.2 51.2 0 1 1 0-102.4h435.77344c21.34016 0 39.7312-9.0112 50.46272-23.10144 142.9504-187.14624 114.11456-335.91296 73.5232-409.6-4.87424-8.8064-18.0224-17.85856-40.67328-17.85856H593.92a51.2 51.2 0 0 1-49.31584-64.9216c18.432-66.27328 25.1904-114.85184 25.14944-149.54496-0.08192-35.06176-7.168-52.0192-12.20608-59.35104-4.99712-7.20896-16.67072-14.58176-44.60544-5.61152zM284.672 343.81824l0.69632-0.49152a4.096 4.096 0 0 1-0.69632 0.49152z" fill="#1D1D1F" ></path></symbol><symbol id="icon-sousuo-223" viewBox="0 0 1024 1024"><path d="M467.456 900.949333C228.522667 900.949333 34.133333 706.56 34.133333 467.456S228.522667 34.133333 467.456 34.133333s433.493333 194.389333 433.493333 433.322667-194.389333 433.493333-433.493333 433.493333z m0-815.616C256.853333 85.333333 85.333333 256.853333 85.333333 467.456s171.52 382.122667 382.122667 382.122667 382.293333-171.52 382.293333-382.122667S678.229333 85.333333 467.456 85.333333z" fill="#333333" ></path><path d="M331.776 333.482667c-6.485333 0-13.141333-2.56-18.090667-7.509334a25.429333 25.429333 0 0 1 0-36.181333c41.130667-41.130667 95.744-63.658667 153.770667-63.658667 58.197333 0 112.810667 22.698667 153.770667 63.658667 10.069333 10.069333 10.069333 26.282667 0 36.181333-10.069333 10.069333-26.282667 10.069333-36.181334 0a165.239467 165.239467 0 0 0-117.589333-48.64c-44.373333 0-86.186667 17.237333-117.589333 48.64-4.949333 4.949333-11.434667 7.509333-18.090667 7.509334zM964.266667 989.866667c-6.485333 0-13.141333-2.56-18.090667-7.509334L742.570667 778.752c-10.069333-10.069333-10.069333-26.282667 0-36.181333s26.282667-10.069333 36.181333 0l203.605333 203.605333c10.069333 10.069333 10.069333 26.282667 0 36.181333-4.949333 4.949333-11.605333 7.509333-18.090666 7.509334z" fill="#333333" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var i,o,c,a,d,s=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_3701233,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?s(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),i()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(c=i,a=n.document,d=!1,r(),a.onreadystatechange=function(){"complete"==a.readyState&&(a.onreadystatechange=null,l())})}function l(){d||(d=!0,c())}function r(){try{a.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}l()}}(window);
\ No newline at end of file
public/iconfont/iconfont.json 0 → 100644
View file @ 84a97fd0
{
"id": "3701233",
"name": "云平台",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "北鲲云云平台",
"glyphs": [
{
"icon_id": "32228179",
"name": "点赞",
"font_class": "dianzan",
"unicode": "e607",
"unicode_decimal": 58887
},
{
"icon_id": "28529168",
"name": "搜索-223",
"font_class": "sousuo-223",
"unicode": "e9b2",
"unicode_decimal": 59826
}
]
}
public/index.html
View file @ 84a97fd0
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="%PUBLIC_URL%/iconfont/iconfont.css" />
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
......
src/api/api_manager.ts
View file @ 84a97fd0
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-13 09:56:57 * @Date: 2022-06-13 09:56:57
* @LastEditors: 吴永生 15770852798@163.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-09-01 15:30:28 * @LastEditTime: 2022-10-19 21:14:11
* @FilePath: /bkunyun/src/api/api_manager.ts * @FilePath: /bkunyun/src/api/api_manager.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -49,6 +49,12 @@ const RESTAPI = { ...@@ -49,6 +49,12 @@ const RESTAPI = {
API_ADD_PROJECT_USER:`${BACKEND_API_URI_PREFIX}/cpp/project/updatemember`, // 添加项目成员 API_ADD_PROJECT_USER:`${BACKEND_API_URI_PREFIX}/cpp/project/updatemember`, // 添加项目成员
API_GET_PROJECT_POWER:`${BACKEND_API_URI_PREFIX}/cpp/project/listroles`, // 获取项目权限 API_GET_PROJECT_POWER:`${BACKEND_API_URI_PREFIX}/cpp/project/listroles`, // 获取项目权限
API_GET_HARDWARE:`${BACKEND_API_URI_PREFIX}/cpp/cpce/hardware`, // 获取计算队列列表 API_GET_HARDWARE:`${BACKEND_API_URI_PREFIX}/cpp/cpce/hardware`, // 获取计算队列列表
API_GET_PUBLIC_ENV:`${BACKEND_API_URI_PREFIX}/cpp/common/public/env`, // 获取公共环境
API_GET_PUBLIC_PROJECT:`${BACKEND_API_URI_PREFIX}/cpp/common/public/project`, // 获取公共环境
API_ACTORENV_BUILDENV:`${BACKEND_API_URI_PREFIX}/cpp/actorenv/buildenv`, // 新增应用环境
API_ACTORENV_LIST:`${BACKEND_API_URI_PREFIX}/cpp/actorenv/list`, // 查询用户的应用环境（算子环境）
API_ACTORENV_DELETE:`${BACKEND_API_URI_PREFIX}/cpp/actorenv/delete`, // 删除用户算子环境
API_ACTORENV_DETAIL:`${BACKEND_API_URI_PREFIX}/cpp/actorenv/detail`, // 查询应用环境的详情信息
}; };
export default RESTAPI; export default RESTAPI;
src/api/api_prefix.ts
View file @ 84a97fd0
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:17:48 * @Date: 2022-05-31 10:17:48
* @LastEditors: 吴永生 15770852798@163.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-30 16:22:15 * @LastEditTime: 2022-10-17 11:51:35
* @FilePath: /bkunyun/src/api/api_prefix.ts * @FilePath: /bkunyun/src/api/api_prefix.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -36,7 +36,7 @@ switch (process.env.REACT_APP_ENV) { ...@@ -36,7 +36,7 @@ switch (process.env.REACT_APP_ENV) {
BACKEND_API_URI_PREFIX = "https://www.cloudam.cn"; BACKEND_API_URI_PREFIX = "https://www.cloudam.cn";
} }
else { else {
BACKEND_API_URI_PREFIX = "http://47.75.104.171"; BACKEND_API_URI_PREFIX = "http://47.57.4.97";
} }
break; break;
} }
......
src/api/fileserver/CloudEController.ts
View file @ 84a97fd0
...@@ -105,7 +105,7 @@ class CloudEController { ...@@ -105,7 +105,7 @@ class CloudEController {
headers["Cache-Control"] = "no-cache"; headers["Cache-Control"] = "no-cache";
headers["delfilepath"] = Base64.stringify(Utf8.parse(urls)); headers["delfilepath"] = Base64.stringify(Utf8.parse(urls));
let url = ""; let url = "";
if (getLoaclStorageOfKey("userinfo")) { if (getLoaclStorageOfKey("userInfo")) {
url += urlToken(filetoken, projectId); url += urlToken(filetoken, projectId);
} }
return axios.get(APIOPTION() + "/delete/" + url, { return axios.get(APIOPTION() + "/delete/" + url, {
...@@ -129,7 +129,7 @@ class CloudEController { ...@@ -129,7 +129,7 @@ class CloudEController {
) { ) {
if (ApiUtils.getAuthorizationHeaders(headers)) { if (ApiUtils.getAuthorizationHeaders(headers)) {
headers["Cache-Control"] = "no-cache"; headers["Cache-Control"] = "no-cache";
if (getLoaclStorageOfKey("userinfo")) { if (getLoaclStorageOfKey("userInfo")) {
url += urlToken(filetoken, projectId); url += urlToken(filetoken, projectId);
} }
return axios.get( return axios.get(
...@@ -151,7 +151,7 @@ class CloudEController { ...@@ -151,7 +151,7 @@ class CloudEController {
if (ApiUtils.getAuthorizationHeaders(headers)) { if (ApiUtils.getAuthorizationHeaders(headers)) {
headers["Cache-Control"] = "no-cache"; headers["Cache-Control"] = "no-cache";
// headers['parentName'] = '' // headers['parentName'] = ''
if (getLoaclStorageOfKey("userinfo")) { if (getLoaclStorageOfKey("userInfo")) {
url += urlToken(filetoken, projectId); url += urlToken(filetoken, projectId);
} }
return axios.get( return axios.get(
...@@ -172,7 +172,7 @@ class CloudEController { ...@@ -172,7 +172,7 @@ class CloudEController {
) { ) {
if (ApiUtils.getAuthorizationHeaders(headers)) { if (ApiUtils.getAuthorizationHeaders(headers)) {
headers["Cache-Control"] = "no-cache"; headers["Cache-Control"] = "no-cache";
if (getLoaclStorageOfKey("userinfo")) { if (getLoaclStorageOfKey("userInfo")) {
url = urlToken(filetoken, projectId) + "&q=" + url; url = urlToken(filetoken, projectId) + "&q=" + url;
} }
return axios.get( return axios.get(
...@@ -188,7 +188,7 @@ class CloudEController { ...@@ -188,7 +188,7 @@ class CloudEController {
// static JobOutFileListMove(url: any, filetoken: string, projectId: string) { // static JobOutFileListMove(url: any, filetoken: string, projectId: string) {
// if (ApiUtils.getAuthorizationHeaders(headers)) { // if (ApiUtils.getAuthorizationHeaders(headers)) {
// headers["Cache-Control"] = "no-cache"; // headers["Cache-Control"] = "no-cache";
// if (getLoaclStorageOfKey("userinfo")) { // if (getLoaclStorageOfKey("userInfo")) {
// url += urlToken(filetoken, projectId); // url += urlToken(filetoken, projectId);
// } // }
// return axios.get(APIOPTION() + "/download" + url, { // return axios.get(APIOPTION() + "/download" + url, {
...@@ -260,13 +260,14 @@ class CloudEController { ...@@ -260,13 +260,14 @@ class CloudEController {
} }
// 获取文件文本内容（字符串） // 获取文件文本内容（字符串）
static JobFileDownloadText(url: any, filetoken: string, projectId: string) { static JobFileDownloadText(url: any, filetoken: string, projectId: string, fileServerEndPoint: string = '') {
if (ApiUtils.getAuthorizationHeaders(headers)) { if (ApiUtils.getAuthorizationHeaders(headers)) {
url = url + urlToken(filetoken, projectId); url = url + urlToken(filetoken, projectId);
headers["Cache-Control"] = "no-cache"; headers["Cache-Control"] = "no-cache";
headers["Content-Type"] = "multipart/form-data"; headers["Content-Type"] = "multipart/form-data";
let origin = fileServerEndPoint ? fileServerEndPoint : APIOPTION()
return axios.get( return axios.get(
APIOPTION() + "/download" + url + "&showhidden=false", origin + "/download" + url + "&showhidden=false",
{ {
headers: headers, headers: headers,
} }
......
src/api/fileserver/raysyncApi.ts
View file @ 84a97fd0
...@@ -30,14 +30,14 @@ const APIPORT = function () { ...@@ -30,14 +30,14 @@ const APIPORT = function () {
// 当前计算区 // 当前计算区
// let currentRegion = localStorage.getItem("current-region"); // let currentRegion = localStorage.getItem("current-region");
// let currentRegionJson = currentRegion && JSON.parse(currentRegion); // let currentRegionJson = currentRegion && JSON.parse(currentRegion);
// let user = getLoaclStorageOfKey("userinfo"); // let user = getLoaclStorageOfKey("userInfo");
// 文件路径 // 文件路径
// const FILEPATH = // const FILEPATH =
// currentRegionJson && // currentRegionJson &&
// currentRegionJson.location && // currentRegionJson.location &&
// currentRegionJson.location === "ON_PREMISE" && // currentRegionJson.location === "ON_PREMISE" &&
// localStorage.getItem("userinfo") // localStorage.getItem("userInfo")
// ? `/home/${user.name}` // ? `/home/${user.name}`
// : "/home/cloudam"; // : "/home/cloudam";
const FILEPATH_SHARE = "/share"; const FILEPATH_SHARE = "/share";
...@@ -62,7 +62,7 @@ const urlToken = (filetoken: string, projectId: string) => { ...@@ -62,7 +62,7 @@ const urlToken = (filetoken: string, projectId: string) => {
}; };
const getUuid = () => { const getUuid = () => {
const userInfo = getLoaclStorageOfKey("userinfo"); const userInfo = getLoaclStorageOfKey("userInfo");
// 是否共有文件系统 // 是否共有文件系统
if ( if (
localStorage.getItem("isShareFileSystem") && localStorage.getItem("isShareFileSystem") &&
...@@ -75,12 +75,12 @@ const getUuid = () => { ...@@ -75,12 +75,12 @@ const getUuid = () => {
}; };
const USERNAME = () => { const USERNAME = () => {
return getLoaclStorageOfKey("userinfo").name; return getLoaclStorageOfKey("userInfo").name;
}; };
// 加密传输 // 加密传输
const encryptTransfer = () => { const encryptTransfer = () => {
const userInfo = getLoaclStorageOfKey("userinfo"); const userInfo = getLoaclStorageOfKey("userInfo");
if (userInfo) { if (userInfo) {
let encryptTransfer = userInfo.encryptTransfer; let encryptTransfer = userInfo.encryptTransfer;
if (encryptTransfer) { if (encryptTransfer) {
......
src/api/project_api.ts
View file @ 84a97fd0
...@@ -354,7 +354,6 @@ const getHardwreList = (params: {zoneId: string, computeType: string}) => { ...@@ -354,7 +354,6 @@ const getHardwreList = (params: {zoneId: string, computeType: string}) => {
params, params,
}); });
} }
//
export { export {
current, current,
......
src/api/resourceCenter.ts 0 → 100644
View file @ 84a97fd0
/*
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-19 17:09:23
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-19 21:14:35
* @FilePath: /bkunyun/src/api/resourceCenter.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import request from "@/utils/axios/service";
import Api from "./api_manager";
type addActorenvBuildenvParams = {
title: string,
desc: string,
baseEnvId: string,
type: "BATCH" | "FLOW",
filePaths: Array<string>,
bashScript: string,
computeType: string,
publicProjectId: string,
}
/** 获取算子列表请求参数 */
export interface IOperatorListParams {
keyword: string;
productId: string;
type: string;
}
// 获取公共项目
const getPublicProject = () => {
return request({
url: Api.API_GET_PUBLIC_PROJECT,
method: "get",
});
}
// 获取公共环境
const getPublicEnv = (params: {taskType: 'BATCH' | 'FLOW'}) => {
return request({
url: Api.API_GET_PUBLIC_ENV,
method: "get",
params,
});
};
// 新增应用环境
const addActorenvBuildenv = (params: addActorenvBuildenvParams) => {
return request({
url: Api.API_ACTORENV_BUILDENV,
method: "post",
data: params,
});
};
// 获取公共环境
const getActorenvList = (params: {
type: 'BATCH' | 'FLOW' | '',
page: number,
size: number,
title?: string,
}) => {
return request({
url: Api.API_ACTORENV_LIST,
method: "get",
params,
});
};
// 删除用户算子环境
const deleteActorenv = (params: {id: string}) => {
return request({
url:`${Api.API_ACTORENV_DELETE}/${params.id}`,
method: "delete",
});
};
// 获取算子列表
const getOperatorList = (data: IOperatorListParams) => {
return request({
url: Api.API_OPERATOR_LIST,
method: "get",
data
});
}
// 查询应用环境的详情信息
const getActorenvDetail = (params: {id: string}) => {
return request({
url:`${Api.API_ACTORENV_DETAIL}/${params.id}`,
method: "get",
});
};
export {
getPublicEnv,
getPublicProject,
addActorenvBuildenv,
getActorenvList,
deleteActorenv,
getOperatorList,
getActorenvDetail,
};
src/assets/resourceCenter/batchImg.svg 0 → 100644
View file @ 84a97fd0
This diff is collapsed.
src/assets/resourceCenter/flowImg.svg 0 → 100644
View file @ 84a97fd0
This diff is collapsed.
src/assets/resourceCenter/zip.svg 0 → 100644
View file @ 84a97fd0
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 6备份 5</title>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#136EEF" offset="0%"></stop>
<stop stop-color="#084FC2" offset="100%"></stop>
</linearGradient>
</defs>
<g id="新" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="个人资源-新建应用环境备份-6" transform="translate(-642.000000, -2505.000000)">
<g id="编组-20" transform="translate(106.000000, 996.000000)">
<g id="编组-10备份" transform="translate(392.000000, 1479.000000)">
<g id="编组-18" transform="translate(97.000000, 30.000000)">
<g id="编组-6备份-5" transform="translate(47.000000, 0.000000)">
<rect id="矩形" x="0" y="0" width="32" height="32"></rect>
<g id="编组-12备份-1" transform="translate(4.000000, 1.000000)" fill-rule="nonzero">
<path d="M2.52631579,0 L21.4736842,0 C22.8689053,0 24,1.1192875 24,2.5 L24,22.5 L17.6842105,30 L2.52631579,30 C1.13106947,30 0,28.8806875 0,27.5 L0,2.5 C0,1.1192875 1.13106947,0 2.52631579,0 Z" id="矩形备份-11" fill="url(#linearGradient-1)"></path>
<path d="M13.5789474,15 L13.5789474,18.5 C13.5788842,18.7321875 13.4965263,18.95475 13.35,19.1186875 C13.2034105,19.282875 13.0047789,19.375 12.7976842,19.375 L11.2023158,19.375 C10.9952842,19.375 10.7966526,19.2829375 10.65,19.118875 C10.5034105,18.954875 10.4210526,18.732125 10.4210526,18.4998125 L10.4210526,15 L13.5789474,15 Z M12.9473684,16.875 L11.0526316,16.875 L11.0526316,18.75 L12.9473684,18.75 L12.9473684,16.875 Z M13.5789474,11.25 L13.5789474,13.125 L11.6842105,13.125 L11.6842105,11.25 L13.5789474,11.25 Z M12.0032842,0 L12.0032842,1.7237625 L13.5789474,1.7237625 L13.5789474,3.447525 L12.0031579,3.447525 L12.0031579,5.043575 L13.5789474,5.043575 L13.5789474,6.7673125 L12.0032842,6.7673125 L12.0032842,8.4699375 L13.5789474,8.4699375 L13.5789474,10.1725625 L12.0032842,10.1725625 L12.0032842,11.875 L10.4210526,11.875 L10.4210526,10.172375 L11.9967158,10.172375 L11.9967158,8.4698125 L10.4210526,8.4698125 L10.4210526,6.7673125 L11.9967158,6.7673125 L11.9967158,5.043575 L10.4210526,5.043575 L10.4210526,3.3198125 L11.9967158,3.3198125 L11.9967158,1.7237625 L10.4210526,1.7237625 L10.4210526,0 L12.0032842,0 Z" id="形状" fill="#FFFFFF"></path>
<polygon id="矩形备份-13" fill="#FFFFFF" opacity="0.5" points="17.6842105 22.5 24 22.5 20.8421053 26.25 17.6842105 30"></polygon>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/components/CommonComponents/Code/index.tsx 0 → 100644
View file @ 84a97fd0
import CodeMirror from "@uiw/react-codemirror";
type ICodeType = {
value: string;
onChange: any;
height?: string;
theme?: "light" | "dark";
};
const Code = (props: ICodeType) => {
const { value, onChange, height, theme = "dark" } = props;
return (
<CodeMirror
height={height || "100%"}
value={value}
onChange={(e) => onChange(e)}
theme={theme}
/>
);
};
export default Code;
src/components/MyRouter/useMyRouter.ts
View file @ 84a97fd0
...@@ -7,9 +7,10 @@ import NotFound from "@/views/404"; ...@@ -7,9 +7,10 @@ import NotFound from "@/views/404";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
import { useEffect } from "react"; import { useEffect } from "react";
import { menu } from "@/api/routes_api"; import { menu } from "@/api/routes_api";
import { IProductOption } from "@/store/modules/productList";
const useMyRouter = () => { const useMyRouter = () => {
const { permissionStore, menuStore } = useStores(); const { permissionStore, menuStore, productListStore } = useStores();
const userInfo = useMyRequest(current); const userInfo = useMyRequest(current);
const menuInfo = useMyRequest(menu); const menuInfo = useMyRequest(menu);
...@@ -42,16 +43,42 @@ const useMyRouter = () => { ...@@ -42,16 +43,42 @@ const useMyRouter = () => {
} }
}); });
} }
for (let item of menuInfo.res.data) { for (let item of menuInfo.res.data) {
let childrenRoutes: any = []
for (let route of item.routes) { for (let route of item.routes) {
route.element = elements[route.element] || NotFound; route.element = elements[route.element] || NotFound;
route.path = `/product/${item.id}${route.path}`; route.path = `/product/${item.id}${route.path}`;
if (Array.isArray(route.children)) {
route.children.forEach((childrenItem: any, index: number) => {
if (childrenItem.path) {
childrenRoutes.push({
...childrenItem,
element: elements[childrenItem.element] || NotFound,
path: `${route.path}${childrenItem.path}`,
show: false
})
}
})
route.children = route.children.filter((childrenItem: any) => !childrenItem.path)
}
} }
permissionStore.setAddRoutes(item.routes); // permissionStore.setAddRoutes(item.routes);
permissionStore.setAddRoutes([...childrenRoutes, ...item.routes]);
} }
menuStore.initMenu(menuInfo.res.data); menuStore.initMenu(menuInfo.res.data);
permissionStore.initAllRoutes(); permissionStore.initAllRoutes();
// /** 所有产品列表 */
const newProductList:IProductOption[] = [];
for (let item of menuInfo.res.data) {
if (item.type === "product") {
newProductList.push({
label: item.name,
value: item.id,
});
}
}
productListStore.setProductList(newProductList)
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
......
src/components/mui/FormItemBox/index.module.css 0 → 100644
View file @ 84a97fd0
.is_require::after {
display: inline-block;
content: "*";
color: #ff4e4e;
margin-right: 4px;
}
.dynamicFormItem_label {
display: block;
font-size: 14px;
font-weight: 600;
color: #1e2633;
}
.dynamicFormItem_col {
position: relative;
margin-bottom: 20px;
}
.dynamicFormItem_col_helpText {
margin-bottom: 46px;
}
.dynamicFormItem_content {
font-size: 14px;
color: #736f7f;
}
.dynamicFormitem_child {
position: relative;
flex: 1;
width: 100%;
text-align: left;
}
.dynamicFormitem_helpText {
position: absolute;
bottom: -36px;
font-size: 13px;
line-height: 1.15;
color: #9894a5;
}
.dynamicFormitem_helpText_warning {
color: #ff4e4e;
}
.dynamicFormitem_errorTips {
position: absolute;
bottom: -20px;
font-size: 13px;
color: #ff4e4e;
}
src/components/mui/FormItemBox/index.tsx 0 → 100644
View file @ 84a97fd0
import React from "react";
import classNames from "classnames";
import styles from "./index.module.css";
import "./label.css";
// import { Control, ValidationRules } from 'react-hook-form/dist/types/form';
export interface IHelpText {
value: string /** 帮助文字内容 */;
className?: string;
type?: "normal" | "warning" /** 默认normal */;
}
export interface IFormItemBoxProps {
/** label 标签的文本 */
label?: string;
/** 标签宽度 */
labelWidth?: number;
/** 标签文本对齐方式 */
labelAlign?: "left" | "center" | "right";
/** 标签文本的className */
labelClassName?: string;
/** 是否必填 */
require?: boolean;
/** */
children: React.ReactNode;
className?: string;
/** 最外层class */
mainClass?: string;
/** 校验信息 */
errorMessage?: string;
errorClassName?: string;
itemFlex?: "row" | "column";
/** 帮助文字提示信息 */
helpText?: IHelpText;
}
const FormItemBox: React.FunctionComponent<IFormItemBoxProps> = (
props: IFormItemBoxProps
) => {
const {
className,
label,
children,
require,
labelWidth,
labelAlign,
errorMessage,
itemFlex,
mainClass,
helpText,
labelClassName,
errorClassName,
} = props;
return (
<div
className={classNames(
styles.dynamicFormItem_div,
mainClass,
helpText && helpText.value && styles.dynamicFormItem_col_helpText
)}
>
<div
className={classNames(
styles.dynamicFormItem_content,
`dynamicFormItem-${itemFlex}`,
className
)}
>
<span
style={{ width: `${labelWidth}px` }}
className={classNames(
styles.dynamicFormItem_label,
{ [styles.is_require]: require },
`align-${itemFlex === "row" ? labelAlign : "left"}`,
labelClassName
)}
>
{label}
</span>
<div className={styles.dynamicFormitem_child}>
{children}
{errorMessage && (
<div
className={classNames(
styles.dynamicFormitem_errorTips,
errorClassName
)}
>
{errorMessage}
</div>
)}
<div
className={classNames(
styles.dynamicFormitem_helpText,
helpText &&
helpText.type === "warning" &&
styles.dynamicFormitem_helpText_warning,
helpText && helpText.className
)}
>
{helpText?.value}
</div>
</div>
</div>
</div>
);
};
FormItemBox.defaultProps = {
labelWidth: 100,
labelAlign: "right",
itemFlex: "row",
};
export default FormItemBox;
src/components/mui/FormItemBox/label.css 0 → 100644
View file @ 84a97fd0
.dynamicFormItem-row {
display: flex;
align-items: center;
}
.dynamicFormItem-column {
display: flex;
flex-direction: column;
align-items: flex-start;
}
src/components/mui/MyInput.tsx
View file @ 84a97fd0
...@@ -121,6 +121,13 @@ const MyInput = (props: MyInputProps) => { ...@@ -121,6 +121,13 @@ const MyInput = (props: MyInputProps) => {
}, },
}, },
}, },
MuiFormHelperText: {
styleOverrides: {
root: {
marginLeft: "0px",
},
},
},
}, },
}); });
......
src/components/mui/MySelect.tsx
View file @ 84a97fd0
/* /*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2021-12-04 15:46:25 * @Date: 2021-12-04 15:46:25
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-21 18:00:58 * @LastEditTime: 2022-10-19 18:41:04
* @FilePath: /lionet-slb-pc/src/components/SearchView/components/Collapse.tsx * @FilePath: /lionet-slb-pc/src/components/SearchView/components/Collapse.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -13,6 +13,7 @@ import FormHelperText from "@mui/material/FormHelperText"; ...@@ -13,6 +13,7 @@ import FormHelperText from "@mui/material/FormHelperText";
import Select, { SelectChangeEvent, SelectProps } from "@mui/material/Select"; import Select, { SelectChangeEvent, SelectProps } from "@mui/material/Select";
import { createTheme, ThemeProvider } from "@mui/material"; import { createTheme, ThemeProvider } from "@mui/material";
import selectActive from "@/assets/project/selectActive.svg"; import selectActive from "@/assets/project/selectActive.svg";
import { useState } from "react";
export interface IOption { export interface IOption {
label: string; label: string;
...@@ -192,7 +193,10 @@ export default function MySelect(props: IProps) { ...@@ -192,7 +193,10 @@ export default function MySelect(props: IProps) {
}, },
}); });
const [insideValue, setInsideValue] = useState<string>("");
const handleChange = (e: SelectChangeEvent<unknown>) => { const handleChange = (e: SelectChangeEvent<unknown>) => {
setInsideValue(e.target.value as string);
onChange && onChange(e.target.value as string); onChange && onChange(e.target.value as string);
}; };
...@@ -200,7 +204,10 @@ export default function MySelect(props: IProps) { ...@@ -200,7 +204,10 @@ export default function MySelect(props: IProps) {
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<FormControl fullWidth={fullWidth} variant={variant} error={error}> <FormControl fullWidth={fullWidth} variant={variant} error={error}>
{isTitle ? ( {isTitle ? (
<InputLabel id="demo-simple-select-label"> <InputLabel
id="demo-simple-select-label"
sx={{ color: "rgba(194, 198, 204, 1)" }}
>
{title || "请选择"} {title || "请选择"}
</InputLabel> </InputLabel>
) : null} ) : null}
...@@ -211,7 +218,7 @@ export default function MySelect(props: IProps) { ...@@ -211,7 +218,7 @@ export default function MySelect(props: IProps) {
size="small" size="small"
multiple={multiple} multiple={multiple}
{...other} {...other}
value={value || ""} value={value || insideValue || ""}
onChange={handleChange} onChange={handleChange}
> >
{options.length {options.length
......
src/components/mui/MyTableNew.tsx
View file @ 84a97fd0
...@@ -40,7 +40,7 @@ interface IMyTableProps { ...@@ -40,7 +40,7 @@ interface IMyTableProps {
totalElements?: number; // 数据总量 不止是列表渲染的长度 totalElements?: number; // 数据总量 不止是列表渲染的长度
sortState?: sortState; // 排序状态 sortState?: sortState; // 排序状态
setSortState?: any; // 设置排序状态 setSortState?: any; // 设置排序状态
paginationType?: "simple" | "complex"; // 分页组件的类型 simple简介式 complex复杂、带每页数量切换、总数等 paginationType?: "simple" | "complex"; // 分页组件的类型 simple简洁式 complex复杂、带每页数量切换、总数等
rowsPerPage?: number; // 每页多少条数据 rowsPerPage?: number; // 每页多少条数据
handleChangeRowsPerPage?: any; // 每页多少条数据变化 handleChangeRowsPerPage?: any; // 每页多少条数据变化
nodataText?: any; // 无数据文案 nodataText?: any; // 无数据文案
......
src/components/mui/MyTabs/index.module.css 0 → 100644
View file @ 84a97fd0
.titleBox {
font-size: 18px;
padding-left: 24px;
line-height: 26px;
font-weight: 600;
color: #1e2633;
line-height: 48px;
}
.titleBox::after {
content: "|";
padding: 0 24px;
color: #dde1e6;
}
src/components/mui/Tabs.tsx → src/components/mui/MyTabs/index.tsx
View file @ 84a97fd0
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13 * @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生 15770852798@163.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-09-01 19:34:35 * @LastEditTime: 2022-10-17 16:16:42
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -14,6 +14,9 @@ import Tab from "@mui/material/Tab"; ...@@ -14,6 +14,9 @@ import Tab from "@mui/material/Tab";
import { ThemeProvider, createTheme } from "@mui/material/styles"; import { ThemeProvider, createTheme } from "@mui/material/styles";
import { TabContext, TabList, TabPanel } from "@mui/lab"; import { TabContext, TabList, TabPanel } from "@mui/lab";
import { Typography } from "@mui/material"; import { Typography } from "@mui/material";
import classNames from "classnames";
import styles from "./index.module.css";
interface ITabList { interface ITabList {
label: string; label: string;
...@@ -27,12 +30,22 @@ interface ITabList { ...@@ -27,12 +30,22 @@ interface ITabList {
} }
interface IProps { interface IProps {
/** 标题 */
title?: string;
/** title样式class */
titleClass?: any;
/** 选中值 */
value?: string; value?: string;
/** 值 */
onChange?: (val: string) => void; onChange?: (val: string) => void;
/** tab页面数组 */
tabList: ITabList[]; tabList: ITabList[];
/** 默认选中tab */
defaultValue?: string; defaultValue?: string;
/** 面板样式 */
tabPanelSx?: any; tabPanelSx?: any;
allowNullValue?: boolean; // 是否允许空值 /** 是否允许空值 */
allowNullValue?: boolean;
} }
const theme = createTheme({ const theme = createTheme({
...@@ -78,6 +91,8 @@ const Tabs = (props: IProps) => { ...@@ -78,6 +91,8 @@ const Tabs = (props: IProps) => {
onChange, onChange,
allowNullValue = false, allowNullValue = false,
tabPanelSx = { padding: "24px 0 0 0" }, tabPanelSx = { padding: "24px 0 0 0" },
title,
titleClass,
} = props; } = props;
const [tabValue, setTabValue] = useState( const [tabValue, setTabValue] = useState(
...@@ -148,6 +163,16 @@ const Tabs = (props: IProps) => { ...@@ -148,6 +163,16 @@ const Tabs = (props: IProps) => {
onTabChange(val); onTabChange(val);
}} }}
> >
{title ? (
<span
className={classNames({
[styles.titleBox]: true,
[titleClass]: titleClass,
})}
>
{title}
</span>
) : null}
{tabList {tabList
?.filter((item) => !item.hide) ?.filter((item) => !item.hide)
.map((item, key) => { .map((item, key) => {
......
src/router/index.ts
View file @ 84a97fd0
/* /*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13 * @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-06-24 14:32:32 * @LastEditTime: 2022-10-18 10:54:54
* @FilePath: /bkunyun/src/router/index.ts * @FilePath: /bkunyun/src/router/index.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
import { AnyMap } from "immer/dist/internal"; import { AnyMap } from "immer/dist/internal";
...@@ -13,12 +13,14 @@ import MenuLayout from "@/views/MenuLayout"; ...@@ -13,12 +13,14 @@ import MenuLayout from "@/views/MenuLayout";
import * as React from "react"; import * as React from "react";
import NotFound from "@/views/404"; import NotFound from "@/views/404";
import Demo from "@/views/demo"; import Demo from "@/views/demo";
import SeeEnv from "@/views/ResourceCenter/UserResources/UserResourcesEnvironment/SeeEnv";
import ProjectSetting from "@/views/Project/ProjectSetting"; import ProjectSetting from "@/views/Project/ProjectSetting";
import ProjectData from "@/views/Project/ProjectData"; import ProjectData from "@/views/Project/ProjectData";
import ProjectWorkbench from "@/views/Project/ProjectWorkbench"; import ProjectWorkbench from "@/views/Project/ProjectWorkbench";
import ProjectSubmitWork from "@/views/Project/ProjectSubmitWork"; import ProjectSubmitWork from "@/views/Project/ProjectSubmitWork";
import ProjectJobDetail from "@/views/Project/ProjectJobDetail"; import ProjectJobDetail from "@/views/Project/ProjectJobDetail";
import ProjectOverview from "@/views/Project/ProjectOverview"; import ProjectOverview from "@/views/Project/ProjectOverview";
import UserResources from "@/views/ResourceCenter/UserResources";
export type route = { export type route = {
id?: string; id?: string;
...@@ -51,6 +53,9 @@ export const elements: { ...@@ -51,6 +53,9 @@ export const elements: {
}) => JSX.Element | any; }) => JSX.Element | any;
} = { } = {
Demo: Demo, Demo: Demo,
SeeTemplate: Demo,
UserResources: UserResources,
SeeEnv: SeeEnv,
ProjectSetting: ProjectSetting, ProjectSetting: ProjectSetting,
ProjectData: ProjectData, ProjectData: ProjectData,
ProjectWorkbench: ProjectWorkbench, ProjectWorkbench: ProjectWorkbench,
......
src/store/index.ts
View file @ 84a97fd0
/* /*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-09 20:41:05 * @Date: 2022-06-09 20:41:05
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-06-14 20:55:22 * @LastEditTime: 2022-10-19 16:21:50
* @FilePath: /bkunyun/src/store/index.ts * @FilePath: /bkunyun/src/store/index.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -12,10 +12,11 @@ import permissionStore from "./modules/permission"; ...@@ -12,10 +12,11 @@ import permissionStore from "./modules/permission";
import menuStore from "./modules/menu"; import menuStore from "./modules/menu";
import currentProjectStore from "./modules/currentProject"; import currentProjectStore from "./modules/currentProject";
import fileListStore from "./modules/fileList"; import fileListStore from "./modules/fileList";
import productListStore from './modules/productList'
configure({ enforceActions: "always" }); configure({ enforceActions: "always" });
export const stores = { permissionStore, menuStore, currentProjectStore, fileListStore }; export const stores = { permissionStore, menuStore, currentProjectStore, fileListStore, productListStore };
/** Store类型 */ /** Store类型 */
export type Stores = typeof stores; export type Stores = typeof stores;
......
src/store/modules/productList.ts 0 → 100644
View file @ 84a97fd0
/*
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-07-11 11:49:55
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-19 16:25:27
* @FilePath: /bkunyun/src/store/modules/currentProject.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { makeAutoObservable } from "mobx";
export interface IProductOption{
label: string;
value: string;
}
class newProductList {
constructor() {
makeAutoObservable(this);
}
// 产品列表
productList: IProductOption[] = [];
setProductList = (list: IProductOption[]) => {
this.productList = list;
};
}
const productListStore = new newProductList();
export default productListStore;
src/utils/util.ts
View file @ 84a97fd0
...@@ -90,7 +90,7 @@ export const storageUnitFromB = (b: number) => { ...@@ -90,7 +90,7 @@ export const storageUnitFromB = (b: number) => {
} else if (b < 1024 * 1024 * 1024 * 1024) { } else if (b < 1024 * 1024 * 1024 * 1024) {
return `${(b / (1024 * 1024 * 1024)).toFixed(2)}G`; return `${(b / (1024 * 1024 * 1024)).toFixed(2)}G`;
} else { } else {
return `${(b / (1024 * 1024 * 1024 * 1024)).toFixed(2)}t`; return `${(b / (1024 * 1024 * 1024 * 1024)).toFixed(2)}T`;
} }
}; };
......
src/views/CustomOperator/components/OperatorList/index.tsx
View file @ 84a97fd0
...@@ -164,10 +164,10 @@ const OperatorList = observer((props: IProps) => { ...@@ -164,10 +164,10 @@ const OperatorList = observer((props: IProps) => {
const dom = document.getElementById("customOperatorFlow"); const dom = document.getElementById("customOperatorFlow");
const clientX = e.clientX; const clientX = e.clientX;
const clientY = e.clientY; const clientY = e.clientY;
const upperLeftPointX = Number(dom?.offsetLeft); const upperLeftPointX = Number(dom?.getBoundingClientRect()?.left);
const upperLeftPointY = Number(dom?.offsetTop); const upperLeftPointY = Number(dom?.getBoundingClientRect()?.top);
const lowerRightX = Number(upperLeftPointX) + Number(dom?.offsetWidth); const lowerRightX = Number(upperLeftPointX) + Number(dom?.clientWidth);
const lowerRightY = Number(upperLeftPointY) + Number(dom?.offsetHeight); const lowerRightY = Number(upperLeftPointY) + Number(dom?.clientHeight);
if ( if (
clientX > upperLeftPointX && clientX > upperLeftPointX &&
clientY > upperLeftPointY && clientY > upperLeftPointY &&
...@@ -178,7 +178,7 @@ const OperatorList = observer((props: IProps) => { ...@@ -178,7 +178,7 @@ const OperatorList = observer((props: IProps) => {
const newOperatorItem = getNewOperatorItem( const newOperatorItem = getNewOperatorItem(
newDragItem, newDragItem,
clientX - upperLeftPointX, clientX - upperLeftPointX,
clientY - upperLeftPointY - 42 clientY - upperLeftPointY
); );
const newVal = cloneDeep(operatorList); const newVal = cloneDeep(operatorList);
newVal.push(newOperatorItem); newVal.push(newOperatorItem);
......
src/views/MenuLayout/index.module.css
View file @ 84a97fd0
...@@ -46,3 +46,11 @@ ...@@ -46,3 +46,11 @@
background-color: #e6eaf0; background-color: #e6eaf0;
font-weight: 500; font-weight: 500;
} }
.asideTop {
padding: 19px 24px 13px;
line-height: 24px;
font-size: 16px;
color: rgba(30, 38, 51, 1);
font-weight: 550;
}
src/views/MenuLayout/index.tsx
View file @ 84a97fd0
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
*/ */
import { Box, List } from "@mui/material"; import { Box, List } from "@mui/material";
import CurrentProject from "../Project/components/CurrentProject"; import CurrentProject from "../Project/components/CurrentProject";
import React from "react"; import React, { useMemo } from "react";
import { Outlet, useNavigate, useLocation } from "react-router-dom"; import { Outlet, useNavigate, useLocation } from "react-router-dom";
import style from "./index.module.css"; import style from "./index.module.css";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
...@@ -44,10 +44,34 @@ const MenuLayout = observer(() => { ...@@ -44,10 +44,34 @@ const MenuLayout = observer(() => {
} }
}; };
// // 左侧菜单顶部是否显示当前项目组件
// const showCurrentProject = useMemo(() => {
// const noCurrentProjectRouterApp = ["userCenter", "resourceCenter"];
// return noCurrentProjectRouterApp.every((item) => {
// return pathname.indexOf(item) === -1;
// });
// }, [pathname]);
const renderAsideTop = useMemo(() => {
const noCurrentProjectRouterApp = ["userCenter", "resourceCenter"];
if (
noCurrentProjectRouterApp.every((item) => {
return pathname.indexOf(item) === -1;
})
) {
return <CurrentProject />;
}
if (pathname.indexOf("resourceCenter") !== -1) {
return <div className={style.asideTop}>资源中心</div>;
}
return null;
}, [pathname]);
return ( return (
<Box className={style.container}> <Box className={style.container}>
<Box className={style.aside}> <Box className={style.aside}>
{pathname.indexOf("userCenter") < 0 && <CurrentProject />} {renderAsideTop}
{/* {showCurrentProject && <CurrentProject />} */}
<List <List
sx={{ sx={{
paddingTop: 0, paddingTop: 0,
...@@ -61,7 +85,8 @@ const MenuLayout = observer(() => { ...@@ -61,7 +85,8 @@ const MenuLayout = observer(() => {
key={"sidebar" + index} key={"sidebar" + index}
className={classnames({ className={classnames({
[style.listItem]: true, [style.listItem]: true,
[style.active]: `/v3${item.path}` === pathname, [style.active]: pathname.indexOf(`/v3${item.path}`) !== -1,
// [style.active]: `/v3${item.path}` === pathname,
})} })}
style={ style={
`/v3${item.path}` === pathname `/v3${item.path}` === pathname
......
src/views/Project/ProjectData/UpLoaderFile/index.tsx
View file @ 84a97fd0
...@@ -28,6 +28,7 @@ type IMoveFileProps = { ...@@ -28,6 +28,7 @@ type IMoveFileProps = {
const UpLoaderFile = observer((props: IMoveFileProps) => { const UpLoaderFile = observer((props: IMoveFileProps) => {
const { path, list, uploaderDialogOpen, setUploaderDialogOpen } = props; const { path, list, uploaderDialogOpen, setUploaderDialogOpen } = props;
console.log(path);
const { fileListStore } = useStores(); const { fileListStore } = useStores();
const message = useMessage(); const message = useMessage();
...@@ -41,6 +42,7 @@ const UpLoaderFile = observer((props: IMoveFileProps) => { ...@@ -41,6 +42,7 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
const currentProjectStore = toJS(useGlobalStore("currentProjectStore")); const currentProjectStore = toJS(useGlobalStore("currentProjectStore"));
const uploadInfoStore = toJS(useGlobalStore("fileListStore")); const uploadInfoStore = toJS(useGlobalStore("fileListStore"));
console.log(uploadInfoStore);
const { uploadFile } = UseTusUpload(uploadInfoStore); const { uploadFile } = UseTusUpload(uploadInfoStore);
const onDrop = useCallback( const onDrop = useCallback(
......
src/views/Project/ProjectSetting/index.tsx
View file @ 84a97fd0
/* /*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13 * @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-13 16:51:56 * @LastEditTime: 2022-10-17 15:36:29
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -15,7 +15,7 @@ import NoProject from "@/components/BusinessComponents/NoProject"; ...@@ -15,7 +15,7 @@ import NoProject from "@/components/BusinessComponents/NoProject";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import ProjectMembers from "./ProjectMembers"; import ProjectMembers from "./ProjectMembers";
import BaseInfo from "./BaseInfo"; import BaseInfo from "./BaseInfo";
import Tabs from "@/components/mui/Tabs"; import Tabs from "@/components/mui/MyTabs";
import usePass from "@/hooks/usePass"; import usePass from "@/hooks/usePass";
const ProjectSetting = observer(() => { const ProjectSetting = observer(() => {
......
src/views/Project/ProjectWorkbench/index.tsx
View file @ 84a97fd0
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: rocosen * @Author: rocosen
* @Date: 2022-06-12 10:05:13 * @Date: 2022-06-12 10:05:13
* @LastEditors: 吴永生 15770852798@163.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-09-01 11:51:16 * @LastEditTime: 2022-10-17 15:36:38
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -14,7 +14,7 @@ import { useStores } from "@/store/index"; ...@@ -14,7 +14,7 @@ import { useStores } from "@/store/index";
import WorkbenchTemplate from "./workbenchTemplate"; import WorkbenchTemplate from "./workbenchTemplate";
import WorkbenchList from "./workbenchList"; import WorkbenchList from "./workbenchList";
import Tabs from "@/components/mui/Tabs"; import Tabs from "@/components/mui/MyTabs";
import usePass from "@/hooks/usePass"; import usePass from "@/hooks/usePass";
import NoProject from "@/components/BusinessComponents/NoProject"; import NoProject from "@/components/BusinessComponents/NoProject";
import Template from "@/assets/project/workbenchTemplate.svg"; import Template from "@/assets/project/workbenchTemplate.svg";
......
src/views/ResourceCenter/UserResources/UserResourcesEnvironment/AddEnvironment/index.module.css 0 → 100644
View file @ 84a97fd0
.addEnvironment {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #fff;
display: flex;
}
.left {
/* width: 412px; */
box-sizing: border-box;
background-color: rgba(247, 248, 250, 1);
}
.right {
flex: 1;
padding: 64px 44px 40px;
min-height: 100vh;
overflow: overlay;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.title {
color: rgba(30, 38, 51, 1);
margin-bottom: 40px;
font-size: 24px;
line-height: 32px;
font-weight: 550;
}
.content {
display: flex;
border-radius: 4px;
margin-bottom: 24px;
height: 580px;
}
.form {
width: 368px;
box-sizing: border-box;
padding: 16px 24px;
border: 1px solid #ebedf0;
border-right: none;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.codeBox {
flex: 1;
display: flex;
flex-direction: column;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.codeTitle {
background-color: rgba(230, 233, 237, 1);
padding: 11px 20px;
color: rgba(30, 38, 51, 1);
font-size: 14px;
line-height: 22px;
font-weight: 550;
border-top-right-radius: 4px;
}
.code {
background-color: rgba(247, 248, 250, 1);
flex: 1;
}
.label {
color: rgba(30, 38, 51, 1);
font-size: 14px;
line-height: 22px;
font-weight: 550;
margin-bottom: 8px;
position: relative;
}
.zipText {
color: rgba(138, 144, 153, 1);
font-weight: 400;
}
.required {
color: rgba(255, 78, 78, 1);
}
.download {
position: absolute;
right: 0;
cursor: pointer;
color: rgba(19, 112, 255, 1);
font-weight: 400;
}
.formItem {
position: relative;
margin-bottom: 24px;
}
.tips {
color: rgba(255, 78, 78, 1);
margin-top: 2px;
line-height: 20px;
font-size: 12px;
}
.uploadBox {
border-radius: 4px;
border: 1px dashed #dde1e6;
height: 153px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 14px;
line-height: 22px;
color: rgba(194, 198, 204, 1);
}
.uploaderIcon {
margin-bottom: 8px;
}
.progressContent {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 7px;
}
.progressBox {
width: 200px;
border-radius: 3px;
background-color: rgba(235, 237, 240, 1);
margin-right: 12px;
height: 6px;
}
.progress {
border-radius: 3px;
background-color: rgba(19, 110, 250, 1);
height: 6px;
}
.isDragActive {
border: 1px dashed #000;
}
.formItemHaveHelperText {
margin-bottom: 10px;
}
.uploadAgain {
cursor: pointer;
color: rgba(19, 110, 250, 1);
font-size: 12px;
line-height: 20px;
margin-top: 12px;
}
src/views/ResourceCenter/UserResources/UserResourcesEnvironment/DeleteEnvironment/index.tsx 0 → 100644
View file @ 84a97fd0
import { deleteActorenv } from "@/api/resourceCenter";
import useMyRequest from "@/hooks/useMyRequest";
import { useMessage } from "@/components/MySnackbar";
import MyDialog from "@/components/mui/MyDialog";
interface IDeleteEnvironmentProps {
id: string;
open: boolean;
setDeleteOpen: any;
}
const DeleteEnvironment = (props: IDeleteEnvironmentProps) => {
const { open, id, setDeleteOpen } = props;
const Message = useMessage();
const { run, loading } = useMyRequest(deleteActorenv, {
onSuccess: () => {
setDeleteOpen(false);
Message.success("删除成功");
},
});
const handleConfirm = () => {
console.log(id);
run({ id });
};
return (
<MyDialog
okColor="error"
open={open}
onClose={() => setDeleteOpen(false)}
title="删除环境"
okText="删除"
onConfirm={() => handleConfirm()}
loading={loading}
>
<span>删除后无法恢复，确认删除吗？</span>
</MyDialog>
);
};
export default DeleteEnvironment;
src/views/ResourceCenter/UserResources/UserResourcesEnvironment/SeeEnv/index.module.css 0 → 100644
View file @ 84a97fd0
.titleBox {
padding: 14px 24px;
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 1px solid rgba(235, 237, 240, 1);
}
.goBackIcon {
width: 22px;
height: 22px;
/* background-color: #fff; */
/* border-radius: 4px; */
/* margin-right: 12px; */
/* box-shadow: 0px 2px 5px 0px rgba(3, 47, 105, 0.09); */
cursor: pointer;
}
.title {
margin-left: 2px;
font-size: 18px;
line-height: 26px;
color: rgba(30, 38, 51, 1);
font-weight: 550;
margin-right: 16px;
}
.type {
background-color: rgba(235, 237, 240, 1);
font-size: 12px;
line-height: 20px;
padding: 1px 9px;
color: #565c66;
border-radius: 2px;
}
.baseTitle {
padding: 19px 24px 16px;
line-height: 24px;
font-size: 16px;
color: rgba(30, 38, 51, 1);
font-weight: 550;
}
.basicInfoBox {
border: 1px solid #ebedf0;
border-radius: 4px;
margin: 0 24px;
}
.logsTitle {
padding: 24px 24px 16px;
line-height: 24px;
font-size: 16px;
color: rgba(30, 38, 51, 1);
font-weight: 550;
}
.statusBox {
display: flex;
justify-content: flex-start;
align-items: center;
}
.status {
margin-left: 4px;
}
.LogViewBox {
margin: 0 24px;
position: relative;
}
src/views/ResourceCenter/UserResources/UserResourcesEnvironment/SeeEnv/index.tsx 0 → 100644
View file @ 84a97fd0
import style from "./index.module.css";
import React, { useState, useEffect, useMemo } from "react";
import LogView from "@/views/ResourceCenter/components/LogView";
import { useNavigate } from "react-router-dom";
import BasicInfo, {
IInfoItem,
} from "@/views/ResourceCenter/components/BasinInfo";
import { getActorenvDetail } from "@/api/resourceCenter";
import useMyRequest from "@/hooks/useMyRequest";
import goback from "@/assets/project/goback.svg";
import { useLocation } from "react-router-dom";
import jobFail from "@/assets/project/jobFail.svg";
import jobRun from "@/assets/project/jobRun.svg";
import jobSue from "@/assets/project/jobSue.svg";
const SeeEnv = () => {
const navigate = useNavigate();
const location = useLocation();
const [id, setId] = useState("");
const [info, setInfo] = useState<any>({});
const [infoListTop, setInfoListTop] = useState<Array<IInfoItem>>([]);
const [infoListBot, setInfoListBot] = useState<Array<IInfoItem>>([]);
const [logs, setLogs] = useState<Array<any>>([]);
const getStatus = (item: any) => {
if (item.status === "PENDING") {
return (
<span className={style.statusBox}>
<img src={jobRun} alt="" />
<span className={style.status}>准备构建</span>
</span>
);
} else if (item.status === "CREATING") {
return (
<span className={style.statusBox}>
<img src={jobRun} alt="" />
<span className={style.status}>正在构建</span>
</span>
);
} else if (item.status === "FAILED") {
return (
<span className={style.statusBox}>
<img src={jobFail} alt="" />
<span className={style.status}>构建失败</span>
</span>
);
} else if (item.status === "CREATED") {
return (
<span className={style.statusBox}>
<img src={jobSue} alt="" />
<span className={style.status}>构建完成</span>
</span>
);
} else {
return "";
}
};
const { run, loading } = useMyRequest(getActorenvDetail, {
onSuccess: (res) => {
console.log(res);
setInfo(res.data);
let data = res.data;
setInfoListTop([
{
label: "构建状态",
value: getStatus(data),
},
{
label: "创建时间",
value: data.createdTime,
},
{
label: "构建时长",
value: data.costTime,
},
{
label: "构建成本",
value: "￥" + data.feeCost,
},
{
label: "基础环境",
value: data.baseEnvName,
},
]);
setInfoListBot([
{
label: "描述",
value: data.desc,
},
]);
setLogs(
data.tasks
.filter((task: any) => task.outLog)
.map((task: any) => ({
logName: `${task.title}.log`,
logPath: task.outLog,
}))
);
},
});
useEffect(() => {
if (id) {
run({ id });
}
}, [id, run]);
useEffect(() => {
const locationInfo: any = location?.state;
console.log(locationInfo);
setId(locationInfo.id);
}, [location, setId]);
return (
<div className={style.seeEnv}>
<div className={style.titleBox}>
<img
className={style.goBackIcon}
src={goback}
alt=""
onClick={() => navigate("/product/resourceCenter/userResources")}
/>
<div className={style.title}>{info.title}</div>
<div className={style.type}>
{info.type === "BATCH" ? "批式环境" : "流式环境"}
</div>
</div>
<div className={style.infoBox}>
<div className={style.baseTitle}>基础信息</div>
<div className={style.basicInfoBox}>
<BasicInfo infoList={infoListTop} />
<BasicInfo infoList={infoListBot} />
</div>
</div>
<div className={style.logsBox}>
<div className={style.logsTitle}>日志</div>
<div className={style.LogViewBox}>
<LogView logs={logs}></LogView>
</div>
</div>
</div>
);
};
export default SeeEnv;
src/views/ResourceCenter/UserResources/UserResourcesEnvironment/index.module.css 0 → 100644
View file @ 84a97fd0
.environment {
padding: 19px 24px 0;
}
.top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.tableBox {
height: calc(100vh - 177px);
}
.statusBox {
display: flex;
justify-content: flex-start;
align-items: center;
}
.status {
margin-left: 4px;
}
src/views/ResourceCenter/UserResources/UserResourcesEnvironment/index.tsx 0 → 100644
View file @ 84a97fd0
// 应用环境
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import style from "./index.module.css";
import SearchInput from "@/components/BusinessComponents/SearchInput";
import MySelect from "@/components/mui/MySelect";
import MyButton from "@/components/mui/MyButton";
import MyTable from "@/components/mui/MyTableNew";
import useMyRequest from "@/hooks/useMyRequest";
import { getActorenvList } from "@/api/resourceCenter";
import Add from "@mui/icons-material/Add";
import moment from "moment";
import jobFail from "@/assets/project/jobFail.svg";
import jobRun from "@/assets/project/jobRun.svg";
import jobSue from "@/assets/project/jobSue.svg";
import AddEnvironment from "./AddEnvironment";
import DeleteEnvironment from "./DeleteEnvironment";
const UserResourcesEnvironment = () => {
const navigate = useNavigate();
const [addOpen, setAddopen] = useState(false);
const [title, setTitle] = useState("");
const [type, setType] = useState<"BATCH" | "FLOW" | "">("");
const [list, setList] = useState([]);
const [page, setPage] = useState(0);
const [count, setCount] = useState(0);
const [size, setSize] = useState(20);
const [id, setId] = useState("");
const [deleteOpen, setDeleteOpen] = useState(false);
const [totalElements, setTotalElements] = useState(0);
const headCells: Array<any> = [
{
id: "title",
label: "环境名称",
},
{
id: "type",
label: "环境类型",
width: 100,
},
{
id: "createdTime",
label: "创建时间",
width: 180,
},
{
id: "status",
label: "构建状态",
width: 150,
},
{
id: "caozuo",
label: "操作",
width: 140,
},
];
const { run: getList } = useMyRequest(getActorenvList, {
onSuccess: (res) => {
setList(res.data.content);
setCount(res.data.totalPages - 1);
setTotalElements(res.data.totalElements);
},
});
const pageChange = (value: number) => {
setPage(value - 1);
};
useEffect(() => {
if (!addOpen && !deleteOpen) {
getList({
page,
size,
title,
type,
});
}
}, [getList, page, size, title, type, addOpen, deleteOpen]);
const renderType = (item: any) => {
if (item.type === "BATCH") {
return "批式";
} else if (item.type === "FLOW") {
return "流式";
} else {
return "";
}
};
const renderStatus = (item: any) => {
if (item.status === "PENDING") {
return (
<div className={style.statusBox}>
<img src={jobRun} alt="" />
<span className={style.status}>准备构建</span>
</div>
);
} else if (item.status === "CREATING") {
return (
<div className={style.statusBox}>
<img src={jobRun} alt="" />
<span className={style.status}>正在构建</span>
</div>
);
} else if (item.status === "FAILED") {
return (
<div className={style.statusBox}>
<img src={jobFail} alt="" />
<span className={style.status}>构建失败</span>
</div>
);
} else if (item.status === "CREATED") {
return (
<div className={style.statusBox}>
<img src={jobSue} alt="" />
<span className={style.status}>构建完成</span>
</div>
);
} else {
return "";
}
};
const renderCreatedTime = (item: any) => {
return moment(new Date(item.createdTime)).format("yyyy-MM-DD hh:mm:ss");
};
const handleDelete = (item: any) => {
setId(item.id);
setDeleteOpen(true);
};
const hanleToSeeEnv = (item: any) => {
console.log("hanleToSeeEnv");
console.log(item.id);
navigate("/product/resourceCenter/userResources/seeEnv", {
state: { id: item.id },
});
};
const renderButtons = (item: any) => {
if (item.status === "FAILED") {
return (
<>
<MyButton
text="详情"
style={{
position: "relative",
left: "-10px",
minWidth: "10px",
height: "22px",
padding: "0 10px",
}}
variant="text"
size="medium"
onClick={() => hanleToSeeEnv(item)}
/>
<MyButton
onClick={() => handleDelete(item)}
text="删除"
style={{
position: "relative",
left: "-10px",
minWidth: "10px",
height: "22px",
padding: "0 10px",
}}
variant="text"
size="medium"
color="error"
/>
</>
);
} else {
return (
<MyButton
text="详情"
style={{
position: "relative",
left: "-10px",
minWidth: "10px",
height: "22px",
padding: "0 10px",
}}
variant="text"
size="medium"
onClick={() => hanleToSeeEnv(item)}
/>
);
}
};
return (
<div className={style.environment}>
<div className={style.top}>
<div className={style.topLeft}>
<SearchInput
sx={{ width: 340, marginRight: "16px" }}
onKeyUp={(e: any) => {
if (e.keyCode === 13) {
setTitle(e.target.value);
}
}}
></SearchInput>
{!addOpen && (
<MySelect
title="环境类型"
isTitle={true}
options={[
{
label: "批式",
value: "BATCH",
},
{
label: "流式",
value: "FLOW",
},
]}
value={type}
onChange={(e: any) => setType(e)}
sx={{ width: "150px", height: "32px" }}
></MySelect>
)}
</div>
<div className={style.topRight}>
<MyButton
text="构建应用环境"
onClick={() => setAddopen(true)}
startIcon={<Add />}
></MyButton>
</div>
</div>
<div className={style.tableBox}>
<MyTable
rows={list.map((item: any) => ({
...item,
type: renderType(item),
status: renderStatus(item),
caozuo: renderButtons(item),
createdTime: renderCreatedTime(item),
}))}
headCells={headCells}
fixedHead={true}
hasTableFooter={true}
page={page}
count={count}
pageChange={pageChange}
rowsPerPage={size}
handleChangeRowsPerPage={(e: number) => {
setSize(e);
setPage(0);
}}
nodataText="暂无应用环境"
paginationType="complex"
totalElements={totalElements}
></MyTable>
</div>
{addOpen && <AddEnvironment setAddopen={setAddopen}></AddEnvironment>}
{deleteOpen && (
<DeleteEnvironment
id={id}
open={deleteOpen}
setDeleteOpen={setDeleteOpen}
></DeleteEnvironment>
)}
</div>
);
};
export default UserResourcesEnvironment;
src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.module.css 0 → 100644
View file @ 84a97fd0
.addOperatorBox {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #fff;
display: flex;
}
.left {
/* width: 412px; */
box-sizing: border-box;
background-color: rgba(247, 248, 250, 1);
}
.right {
flex: 1;
padding: 64px 44px 40px;
position: relative;
min-height: 100vh;
overflow: overlay;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.title {
color: rgba(30, 38, 51, 1);
margin-bottom: 32px;
font-size: 24px;
line-height: 32px;
font-weight: 550;
}
.content {
display: flex;
border-radius: 4px;
margin-bottom: 20px;
height: 600px;
}
.form {
width: 368px;
box-sizing: border-box;
padding: 16px 24px;
border: 1px solid #ebedf0;
border-right: none;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.newForm {
width: 368px;
box-sizing: border-box;
padding: 16px 32px 0px 0;
border-right: 1px solid #ebedf0;
}
.codeBox {
flex: 1;
display: flex;
flex-direction: column;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.codeTitle {
background-color: rgba(230, 233, 237, 1);
padding: 11px 20px;
color: rgba(30, 38, 51, 1);
font-size: 14px;
line-height: 22px;
font-weight: 550;
border-top-right-radius: 4px;
}
.code {
background-color: rgba(247, 248, 250, 1);
flex: 1;
}
.parameterConfigBox {
border: 1px solid #ebedf0;
margin-bottom: 24px;
}
.labelClassName {
line-height: 36px;
}
.operatorFormItem {
margin-bottom: 24px;
}
.descBox {
padding-left: 32px;
}
src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx 0 → 100644
View file @ 84a97fd0
/*
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-18 16:12:55
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-19 21:27:03
* @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { useEffect, useState, useCallback, useMemo } from "react";
import classNames from "classnames";
import { observer } from "mobx-react";
import MyInput from "@/components/mui/MyInput";
import MySelect from "@/components/mui/MySelect";
import MyButton from "@/components/mui/MyButton";
import style from "./index.module.css";
import SwitchBatchFolw from "@/views/ResourceCenter/components/SwitchBatchFolw";
import Code from "@/components/CommonComponents/Code";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
import BatchOperatorFlow from "@/views/Project/components/Flow/components/BatchOperatorFlow";
import OperatorList from "@/views/CustomOperator/components/OperatorList";
import FormItemBox from "@/components/mui/FormItemBox";
import { useStores } from "@/store";
interface IAddOperator {
setAddOpen: (val: boolean) => void;
}
type IBuildType = "ENVIRONMENT" | "OPERATOR";
const AddOperator = observer((props: IAddOperator) => {
const { setAddOpen } = props;
/** 创建类型 BATCH - 批算子; FLOW - 流算子*/
const [taskType, setTaskType] = useState<"BATCH" | "FLOW">("BATCH");
/** 创建类型 ENVIRONMENT - 基于环境; OPERATOR - 基于算子*/
const [batchBuildType, setBatchBuildType] =
useState<IBuildType>("ENVIRONMENT");
/** 算子数组 */
const [operatorList, setOperatorList] = useState<ITask[]>([]);
/** 流程编排 算子是否选中 */
const [inputActive, setInputActive] = useState(false);
/** 产品store */
const { productListStore } = useStores();
const [code, setCode] = useState("");
// const [formData, setFormData] = useState<any>();
const buildTypeList = useMemo(() => {
return [
{ value: "ENVIRONMENT", label: "基于应用环境" },
{ value: "OPERATOR", label: "基于流式算子" },
];
}, []);
/** 切换类型 */
const handleRadio = (val: IBuildType) => {
setBatchBuildType(val);
};
const handleSubmit = () => {
console.log(33);
};
return (
<div className={style.addOperatorBox}>
<div className={style.left}>
<SwitchBatchFolw
active={taskType}
setActive={setTaskType}
goBack={() => setAddOpen(false)}
></SwitchBatchFolw>
</div>
<div className={style.right}>
<div className={style.title}>
{taskType === "BATCH" ? "批式算子信息" : "流式算子信息"}
</div>
<div style={{ paddingBottom: "20px" }}>
<RadioGroupOfButtonStyle
RadiosBoxStyle={{ width: 236 }}
value={batchBuildType}
radioOptions={buildTypeList}
handleRadio={handleRadio}
/>
</div>
<div className={style.content}>
<div
className={classNames({
[style.form]: batchBuildType === "ENVIRONMENT",
[style.newForm]: batchBuildType != "ENVIRONMENT",
})}
>
<FormItemBox
label="算子名称"
labelClassName={style.labelClassName}
className={style.operatorFormItem}
itemFlex="column"
require
>
<MyInput
helperText="30字符以内，仅限字母、数字、中文"
placeholder="请输入算子名称"
/>
</FormItemBox>
<FormItemBox
label="算子版本"
labelClassName={style.labelClassName}
className={style.operatorFormItem}
itemFlex="column"
require
>
<MyInput />
</FormItemBox>
<FormItemBox
label="所属产品"
labelClassName={style.labelClassName}
className={style.operatorFormItem}
itemFlex="column"
require
>
<MySelect
fullWidth
options={productListStore?.productList || []}
/>
</FormItemBox>
{batchBuildType === "ENVIRONMENT" ? (
<FormItemBox
label="应用环境"
labelClassName={style.labelClassName}
className={style.operatorFormItem}
itemFlex="column"
require
>
<MySelect
fullWidth
options={[{ label: "cadd", value: "CADD" }]}
/>
</FormItemBox>
) : null}
{batchBuildType === "ENVIRONMENT" ? (
<FormItemBox
label="描述"
labelClassName={style.labelClassName}
className={style.operatorFormItem}
itemFlex="column"
>
<MyInput multiline rows={4} placeholder="请输入算子描述" />
</FormItemBox>
) : null}
</div>
{batchBuildType === "ENVIRONMENT" ? (
<div className={style.codeBox}>
<div className={style.codeTitle}>参数配置</div>
<div className={style.code}>
<Code
value={code}
onChange={(e: string) => setCode(e)}
height="535px"
/>
</div>
</div>
) : (
<div className={style.descBox}>
<FormItemBox
label="描述"
labelClassName={style.labelClassName}
className={style.operatorFormItem}
itemFlex="column"
>
<MyInput
style={{ width: "420px" }}
multiline
rows={10}
placeholder="请输入算子描述"
/>
</FormItemBox>
</div>
)}
</div>
<div className={style.parameterConfigBox}>
<div className={style.codeTitle}>
{batchBuildType === "ENVIRONMENT" ? "运行脚本" : "流程编排"}
</div>
{batchBuildType === "ENVIRONMENT" ? (
<div className={style.code}>
<Code
value={code}
onChange={(e: string) => setCode(e)}
height="350px"
/>
</div>
) : (
<div
id="customOperatorFlow"
style={{ position: "relative", height: 400 }}
>
<OperatorList
operatorList={operatorList}
setOperatorList={setOperatorList}
setInputActive={setInputActive}
/>
<BatchOperatorFlow
tasks={operatorList}
setTasks={setOperatorList}
type="edit"
// onFlowNodeClick={handleNodeClick}
flowNodeDraggable={true}
ListenState={!inputActive}
showVersion={true}
showControls={false}
/>
</div>
)}
</div>
<div className={style.buttonBox}>
<MyButton text="开始构建"></MyButton>
</div>
</div>
</div>
);
});
export default AddOperator;
src/views/ResourceCenter/UserResources/WorkflowOperator/components/OperatorCard/index.module.css 0 → 100644
View file @ 84a97fd0
.itemBox {
width: 334px;
height: 108px;
padding: 20px;
margin: 0 20px 20px 0;
background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%);
box-shadow: 0px 3px 12px 0px rgba(3, 47, 105, 0.09);
border-radius: 6px;
border: 2px solid #ffffff;
}
.itemBox:hover {
box-shadow: 0px 6px 24px 0px rgba(3, 47, 105, 0.14);
}
.itemHeaderBox {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.itemContentBox {
display: flex;
flex-wrap: wrap;
}
.titleBox {
display: block;
font-size: 16px;
color: #1e2633;
}
.titleBox {
display: block;
font-size: 16px;
color: #1e2633;
}
.operatorTypeBox {
display: block;
color: #8a9099;
font-size: 12px;
}
.infoBox {
width: 50%;
font-weight: 400;
color: #8a9099;
font-size: 14px;
line-height: 26px;
}
.infoBox > span {
color: #1e2633;
}
src/views/ResourceCenter/UserResources/WorkflowOperator/components/OperatorCard/index.tsx 0 → 100644
View file @ 84a97fd0
/*
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-17 14:35:11
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-19 21:08:31
* @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import styles from "./index.module.css";
import { IOperatorInfo } from "../../interface";
interface IProps {
operatorInfo: IOperatorInfo;
}
const OperatorCard = (props: IProps) => {
const {
operatorInfo: { title = "", type, version },
} = props;
return (
<div className={styles.itemBox}>
<div className={styles.itemHeaderBox}>
<img alt="" style={{ width: 36, height: 36 }} />
<div>
<b className={styles.titleBox}>{title}</b>
<span className={styles.operatorTypeBox}>批算子</span>
</div>
</div>
<div className={styles.itemContentBox}>
<p className={styles.infoBox}>
所属产品：<span>{type}</span>
</p>
<p className={styles.infoBox}>
算子版本：<span>{`V${version}`}</span>
</p>
<p className={styles.infoBox}>
创建时间：<span>2022-10-11</span>
</p>
</div>
</div>
);
};
export default OperatorCard;
src/views/ResourceCenter/UserResources/WorkflowOperator/components/OperatorDetails/index.module.css 0 → 100644
View file @ 84a97fd0
.detailsBox {
padding: 0 24px;
}
.titleBox {
font-size: 16px;
color: #1e2633;
line-height: 24px;
padding: 20px 0;
}
src/views/ResourceCenter/UserResources/WorkflowOperator/components/OperatorDetails/index.tsx 0 → 100644
View file @ 84a97fd0
/*
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-17 14:35:11
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-19 10:30:55
* @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import styles from "./index.module.css";
import BasicInfo from "../../../../components/BasinInfo";
import { useMemo, useState } from "react";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
const OperatorDetails = () => {
const contentTypeList = useMemo(() => {
return [
{ value: "flowChart", label: "流程图" },
{ value: "parameterList", label: "参数列表" },
{ value: "runScript", label: "运行脚本" },
];
}, []);
/** 详情类型 */
const [contentType, setContentType] = useState<string>("flowChart");
/** 切换类型 */
const handleRadio = (val: string) => {
setContentType(val);
};
return (
<div className={styles.detailsBox}>
<h2 className={styles.titleBox}>基础信息</h2>
<div style={{ border: "1px solid #EBEDF0" }}>
<BasicInfo
infoList={[
{ label: "33333331", value: "1" },
{
label: "1",
value: "42543253245325325432452345235432452323542352354235235321",
},
{ label: "1", value: "1" },
{ label: "1", value: "1" },
{ label: "1", value: "1" },
]}
/>
<BasicInfo infoList={[{ label: "2", value: "2" }]} />
</div>
<div style={{ padding: "26px 0 16px 0" }}>
<RadioGroupOfButtonStyle
RadiosBoxStyle={{ width: 254 }}
value={contentType}
radioOptions={contentTypeList}
handleRadio={handleRadio}
/>
</div>
<div>11</div>
</div>
);
};
export default OperatorDetails;
src/views/ResourceCenter/UserResources/WorkflowOperator/index.module.css 0 → 100644
View file @ 84a97fd0
.indexBox {
padding: 0 4px;
}
.headerBox {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.searchSelectBox {
margin-right: 12px;
}
.contentBox {
display: flex;
flex-wrap: wrap;
padding-left: 20px;
}
src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx 0 → 100644
View file @ 84a97fd0
/*
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-17 14:35:11
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-19 21:11:50
* @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
// 应用环境
import { useEffect, useState } from "react";
import { observer } from "mobx-react";
import SearchInput from "@/components/BusinessComponents/SearchInput";
import MySelect from "@/components/mui/MySelect";
import MyButton from "@/components/mui/MyButton";
import OperatorCard from "./components/OperatorCard";
import AddOperator from "./components/AddOperator";
import { useStores } from "@/store";
import { getOperatorList, IOperatorListParams } from "@/api/resourceCenter";
import styles from "./index.module.css";
import useMyRequest from "@/hooks/useMyRequest";
import { IOperatorInfo } from "./interface";
const WorkflowOperator = observer(() => {
const [addOpen, setAddOpen] = useState<boolean>(false);
/** 产品store */
const { productListStore } = useStores();
/** 算子列表参数 */
const [searchParams, setSearchParams] = useState<IOperatorListParams>({
keyword: "",
productId: "",
type: "",
});
const [list, setList] = useState<IOperatorInfo[]>();
const { run: getList } = useMyRequest(getOperatorList, {
onSuccess: (res) => {
console.log(res);
setList(res?.data);
},
});
useEffect(() => {
getList();
}, []);
return (
<>
<div className={styles.indexBox}>
<div className={styles.headerBox}>
<div>
<SearchInput
sx={{ width: 340, marginRight: "16px" }}
placeholder="输入关键词搜索"
value={searchParams.keyword}
onChange={(e) => {
setSearchParams({ ...searchParams, keyword: e.target.value });
}}
/>
<MySelect
title="所属产品"
isTitle={true}
options={productListStore?.productList || []}
value={searchParams.keyword}
onChange={(e) => {
setSearchParams({ ...searchParams, productId: e });
}}
className={styles.searchSelectBox}
sx={{ width: "150px", height: "32px" }}
/>
<MySelect
title="环境类型"
isTitle={true}
value={searchParams.keyword}
onChange={(e) => {
setSearchParams({ ...searchParams, type: e });
}}
options={[
{
label: "批式",
value: "BATCH",
},
{
label: "流式",
value: "FLOW",
},
]}
sx={{ width: "150px", height: "32px" }}
/>
</div>
<MyButton
text="构建算子"
img={
<span
style={{ fontSize: "14px", marginRight: "8px" }}
className="iconfont icon-dianzan"
></span>
}
onClick={() => setAddOpen(true)}
></MyButton>
</div>
<div className={styles.contentBox}>
{list?.map((item) => {
return <OperatorCard operatorInfo={item} />;
})}
</div>
</div>
{addOpen && <AddOperator setAddOpen={setAddOpen} />}
</>
);
});
export default WorkflowOperator;
src/views/ResourceCenter/UserResources/WorkflowOperator/interface.ts 0 → 100644
View file @ 84a97fd0
/*
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-19 20:50:18
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-19 21:09:14
* @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/interface.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
export type IOperatorType = 'BATCH' | 'FLOW'
export interface IOperatorInfo{
title: string;
type: IOperatorType;
version: string;
productId: string;
}
\ No newline at end of file
src/views/ResourceCenter/UserResources/index.module.css 0 → 100644
View file @ 84a97fd0
.userResources {
height: calc(100vh - 57px);
width: 100%;
}
.top {
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 1px solid rgba(235, 237, 240, 1);
}
.title {
padding: 14px 24px;
color: rgba(30, 38, 51, 1);
font-size: 18px;
line-height: 26px;
font-weight: 550;
}
.line {
width: 1px;
height: 20px;
background-color: rgba(221, 225, 230, 1);
}
.tabs {
display: flex;
justify-content: flex-start;
align-items: center;
}
.tab {
margin-left: 24px;
font-size: 16px;
line-height: 24px;
color: rgba(138, 144, 153, 1);
border-bottom: 2px solid transparent;
padding: 14px 0;
cursor: pointer;
}
.activeTab {
color: rgba(19, 112, 255, 1);
border-bottom: 2px solid rgba(19, 112, 255, 1);
}
.content {
padding: 20px 24px;
height: calc(100% - 55px);
box-sizing: border-box;
}
src/views/ResourceCenter/UserResources/index.tsx 0 → 100644
View file @ 84a97fd0
import style from "./index.module.css";
import usePass from "@/hooks/usePass";
import UserResourcesEnvironment from "./UserResourcesEnvironment";
import { useMemo, useState } from "react";
import classNames from "classnames";
import Tabs from "@/components/mui/MyTabs";
import WorkflowOperator from "./WorkflowOperator";
import OperatorDetails from "./WorkflowOperator/components/OperatorDetails";
const UserResources = () => {
const isPass = usePass();
const tabList = useMemo(() => {
return [
{
label: "工作流模版",
value: "USERRESOURCES_TEMPLATE",
component: <div />,
hide: !isPass("USERRESOURCES_TEMPLATE"),
},
{
label: "工作流算子",
value: "USERRESOURCES_FLOE",
component: <WorkflowOperator />,
hide: !isPass("USERRESOURCES_FLOE"),
},
{
label: "应用环境",
value: "USERRESOURCES_ENVIRONMENT",
component: <UserResourcesEnvironment />,
hide: !isPass("USERRESOURCES_ENVIRONMENT"),
},
];
}, [isPass]);
return (
<div className={style.userResources}>
<Tabs
title="个人资源"
tabList={tabList}
defaultValue={"USERRESOURCES_ENVIRONMENT"}
tabPanelSx={{ padding: "0" }}
/>
{/* <OperatorDetails /> */}
</div>
);
};
export default UserResources;
src/views/ResourceCenter/components/BasinInfo/index.module.css 0 → 100644
View file @ 84a97fd0
.trHeaderBox {
display: flex;
}
.trHeaderBox > div {
position: relative;
padding-left: 24px;
height: 44px;
background: #f5f6f7;
color: #565c66;
line-height: 44px;
width: calc(100% / 5);
}
.trHeaderBox > div::after {
position: absolute;
top: 12px;
right: 0px;
content: "";
height: 20px;
width: 0;
border-left: 1px solid #dde1e6;
}
.trHeaderBox > div:last-child::after {
content: "";
border: none;
}
.trBodyBox {
display: flex;
}
.trBodyBox > div {
overflow: hidden;
text-overflow: ellipsis;
display: "-webkit-box";
padding-left: 24px;
height: 44px;
color: #1e2633;
background: #fff;
line-height: 44px;
}
src/views/ResourceCenter/components/BasinInfo/index.tsx 0 → 100644
View file @ 84a97fd0
/*
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-17 14:35:11
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-18 14:52:48
* @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import MyTooltip from "@/components/mui/MyTooltip";
import { ReactElement, ReactNode } from "react";
import styles from "./index.module.css";
interface IProps {
infoList: IInfoItem[];
}
export interface IInfoItem {
label: string;
value: string | ReactNode | ReactElement;
flex?: number;
}
const BasicInfo = (props: IProps) => {
const { infoList } = props;
return (
<div className={styles.basicInfoBox}>
<div className={styles.trHeaderBox}>
{infoList.map((item) => {
return (
<div
style={{
width:
infoList?.length > 1
? `calc(100% / ${infoList.length})`
: "100%",
}}
>
{item.label}
</div>
);
})}
</div>
<div className={styles.trBodyBox}>
{infoList.map((item) => {
return (
<div
style={{
width:
infoList?.length > 1
? `calc(100% / ${infoList.length})`
: "100%",
}}
>
<MyTooltip
title={typeof item.value === "string" ? item.value : ""}
>
<span>{item.value}</span>
</MyTooltip>
</div>
);
})}
</div>
</div>
);
};
export default BasicInfo;
src/views/ResourceCenter/components/LogView/index.module.css 0 → 100644
View file @ 84a97fd0
This diff is collapsed.
src/views/ResourceCenter/components/LogView/index.tsx 0 → 100644
View file @ 84a97fd0
This diff is collapsed.
src/views/ResourceCenter/components/SwitchBatchFolw/index.module.css 0 → 100644
View file @ 84a97fd0
.switchBatchFolw {
height: 100vh;
width: 50vh;
background-color: rgba(247, 248, 250, 1);
display: flex;
flex-direction: column;
}
.goBackBox {
box-sizing: border-box;
height: 110px;
padding: 64px 0 14px 25%;
line-height: 32px;
font-size: 18px;
color: #8a9099;
display: flex;
justify-content: flex-start;
align-items: center;
}
.goBackIcon {
width: 32px;
height: 32px;
background-color: #fff;
border-radius: 4px;
margin-right: 12px;
box-shadow: 0px 2px 5px 0px rgba(3, 47, 105, 0.09);
cursor: pointer;
}
.goBackText {
line-height: 32px;
font-size: 18px;
color: #8a9099;
}
.switchBox {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-end;
position: relative;
}
.switchItem {
width: 100%;
position: relative;
padding-right: 44px;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.activeSwitchItem {
padding-right: 34px;
}
.itemImg {
width: 58%;
cursor: pointer;
}
.itemImg:hover {
box-shadow: 0px 8px 20px -6px rgba(3, 47, 105, 0.14);
}
.activeImg {
width: 64%;
box-shadow: 0px 12px 30px -8px rgba(3, 47, 105, 0.18);
}
.activeImg:hover {
box-shadow: 0px 12px 30px -8px rgba(3, 47, 105, 0.18);
}
.arrow {
width: 0px;
height: 0px;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 25px solid #fff;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
src/views/ResourceCenter/components/SwitchBatchFolw/index.tsx 0 → 100644
View file @ 84a97fd0
This diff is collapsed.
src/views/WorkFlowEdit/components/ParameterSetting/index.tsx
View file @ 84a97fd0
...@@ -19,7 +19,7 @@ import MyRadio from "@/components/mui/MyRadio"; ...@@ -19,7 +19,7 @@ import MyRadio from "@/components/mui/MyRadio";
import questionMark from "@/assets/project/questionMark.svg"; import questionMark from "@/assets/project/questionMark.svg";
import fileSelectIcon from "@/assets/project/fileSelect.svg"; import fileSelectIcon from "@/assets/project/fileSelect.svg";
import MySwitch from "@/components/mui/MySwitch"; import MySwitch from "@/components/mui/MySwitch";
import Tabs from "@/components/mui/Tabs"; import Tabs from "@/components/mui/MyTabs";
import { getCustomTemplateParameterCheckResult } from "../../util"; import { getCustomTemplateParameterCheckResult } from "../../util";
import MyTooltip from "@/components/mui/MyTooltip"; import MyTooltip from "@/components/mui/MyTooltip";
import { useSize } from "ahooks"; import { useSize } from "ahooks";
......
src/views/demo/IconfontDemo/index.tsx 0 → 100644
View file @ 84a97fd0
const IconfontDemo = () => {
return (
<div>
IconfontDemo
<div style={{ fontSize: "50px", color: "red" }}>
<svg className="icon" aria-hidden="true">
<use xlinkHref="#icon-sousuo-223"></use>
</svg>
</div>
<div style={{ fontSize: "50px", color: "red" }}>
<svg className="icon" aria-hidden="true">
<use xlinkHref="#icon-dianzan"></use>
</svg>
</div>
<span
style={{ fontSize: "50px", color: "red" }}
className="iconfont icon-dianzan"
></span>
</div>
);
};
export default IconfontDemo;
src/views/demo/index.tsx
View file @ 84a97fd0
This diff is collapsed.
yarn.lock
View file @ 84a97fd0
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment