fix issue

templates/repo/home.tmpl

@@ -99,6 +99,7 @@
 		animation-fill-mode: both;
 	}
 </style>
+<link rel="stylesheet" href="{{StaticUrlPrefix}}/css/vp-notebook-debug.css?v={{MD5 AppVer}}" />
 <div class="repository file list">
 	{{template "repo/header" .}}
 	<div class="ui container">
@@ -201,7 +202,7 @@
 							title="{{$v}}">{{EllipsisString $v 30}}</a></span>{{end}}{{end}}</span></div>
 			{{end}}
 			<div class="fitted item">
-				<button class="ui green button mini" style="display: flex;">
+				<button class="ui green button mini" id="notebook-debug" style="display: flex;">
 					<i class="ri-terminal-box-line" style="margin-right: 0.3rem;"></i>
 					在Notebook中打开
 				  </button>
@@ -400,6 +401,7 @@
 		</div>
 
 	</div>
+	<div id="__vue-root"></div>
 </div>
 
 <script type="text/javascript">
@@ -409,4 +411,5 @@
 //     });
 // });
 </script>
+<script src="{{StaticUrlPrefix}}/js/vp-notebook-debug.js?v={{MD5 AppVer}}"></script>
 {{template "base/footer" .}}

web_src/vuepages/apis/modules/notobook.js

@@ -0,0 +1,41 @@
+import service from '../service';
+
+// Notebook新建页面需要的信息
+export const getFileNotebook = () => {
+  return service({
+    url: '/api/v1/file_notebook',
+    method: 'get',
+    params: {},
+  });
+}
+
+// 算力积分获取、消耗明细
+// operate-INCREASE 表示获取明细  DECREASE表示消耗明细, page-当前页, pageSize-每页条数
+export const getPointList = (params) => {
+  return service({
+    url: '/reward/point/record/list',
+    method: 'get',
+    params,
+  });
+}
+
+// 管理员充值、扣减用户积分
+// TargetUserId, OperateType-INCREASE,DECREASE, Amount, Remark, RewardType-POINT
+export const setPointOperate = (data) => {
+  return service({
+    url: '/operation/reward/point/account/operate',
+    method: 'post',
+    data,
+    params: {}
+  });
+}
+
+// 算力积分页面
+export const getPoint = () => {
+  return service({
+    url: '/reward/point',
+    method: 'get',
+    params: {},
+    data: {},
+  });
+}

web_src/vuepages/pages/notebook/debug/index.vue

@@ -0,0 +1,368 @@
+<template>
+  <div>
+    <el-dialog
+      title="新建Notebook调试任务"
+      :visible.sync="dialogVisible"
+      width="50%"
+      :close-on-click-modal="false"
+    >
+      <div class="wrapper">
+        <div
+          class="three-resource-type"
+          :class="{ active: selectIndex == 0 }"
+          @click="selectResource(0)"
+        >
+          <div class="resource-child-node">
+            <div class="resource-type-icon background-C">
+              <span class="text">C</span>
+            </div>
+            <div class="resource-type-detail">
+              <div class="detail-title"><span>CPU 环境</span></div>
+              <div class="detail-spec">
+                <span>规格：CPU: 4，内存: 32GB，共享内存: 16GB</span>
+              </div>
+              <div class="detail-spec">
+                <span>镜像： ubuntuxx. xx-py37-torch1.9.1</span>
+              </div>
+            </div>
+            <div class="resource-select">
+              <i v-if="selectIndex===0" :class="[slideActive ?'slide-in-top':'slide-in-bottom']" class="ri-checkbox-circle-line green"></i>
+              <i
+                class="ri-checkbox-blank-circle-line gray"
+                :class="{'fade-out':selectIndex===0}"
+              ></i>
+            </div>
+          </div>
+        </div>
+        <div
+          class="three-resource-type"
+          :class="{ active: selectIndex == 1 }"
+          @click="selectResource(1)"
+        >
+          <div class="resource-child-node">
+            <div class="resource-type-icon background-N">
+              <span class="text">N</span>
+            </div>
+            <div class="resource-type-detail">
+              <div class="detail-title"><span>CPU 环境</span></div>
+              <div class="detail-spec">
+                <span>规格：CPU: 4，内存: 32GB，共享内存: 16GB</span>
+              </div>
+              <div class="detail-spec">
+                <span>镜像： ubuntuxx. xx-py37-torch1.9.1</span>
+              </div>
+            </div>
+            <div class="resource-select">
+                <i v-if="selectIndex===1" :class="[slideActive ?'slide-in-top':'slide-in-bottom']" class="ri-checkbox-circle-line green"></i>
+              <i
+                class="ri-checkbox-blank-circle-line gray"
+                :class="{'fade-out':selectIndex===1}"
+              ></i>
+            </div>
+          </div>
+        </div>
+        <div
+          class="three-resource-type"
+          :class="{ active: selectIndex == 2 }"
+          @click="selectResource(2)"
+        >
+          <div class="resource-child-node">
+            <div class="resource-type-icon background-G">
+              <span class="text">G</span>
+            </div>
+            <div class="resource-type-detail">
+              <div class="detail-title"><span>CPU 环境</span></div>
+              <div class="detail-spec">
+                <span>规格：CPU: 4，内存: 32GB，共享内存: 16GB</span>
+              </div>
+              <div class="detail-spec">
+                <span>镜像： ubuntuxx. xx-py37-torch1.9.1</span>
+              </div>
+            </div>
+            <div class="resource-select">
+                <i v-if="selectIndex===2" :class="[slideActive ?'slide-in-top':'slide-in-bottom']" class="ri-checkbox-circle-line green"></i>
+              <i
+                class="ri-checkbox-blank-circle-line gray"
+                :class="{'fade-out':selectIndex===2}"
+              ></i>
+            </div>
+          </div>
+        </div>
+        <div class="resource-footer">
+          <div class="resource-operate">
+            <button class="ui green button">新建任务</button>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getFileNotebook } from "~/apis/modules/notobook";
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      selectIndex: 0,
+      slideActive:true,
+    };
+  },
+  methods: {
+    handleClose(done) {
+      this.$confirm("确认关闭？")
+        .then((_) => {
+          done();
+        })
+        .catch((_) => {});
+    },
+    selectResource(index) {
+        if(index==this.selectIndex){
+            return
+        }  
+        if(index>this.selectIndex){
+            this.slideActive = true
+        }else{
+            this.slideActive = false
+        }
+      this.selectIndex = index;
+    },
+    getNotebookInfo(){
+        getFileNotebook().then((res)=>{
+            console.log(res)
+        })
+    }
+  },
+  mounted() {
+    this.getNotebookInfo()
+    // this.dialogVisible = true
+    console.log("-------------");
+    let that = this;
+    document
+      .querySelector("#notebook-debug")
+      .addEventListener("click", function () {
+        that.dialogVisible = true;
+      });
+  },
+};
+</script>
+<style scoped lang="less">
+/deep/ .el-dialog__header {
+  text-align: left;
+  height: 45px;
+  background: rgb(240, 240, 240);
+  border-radius: 5px 5px 0px 0px;
+  border-bottom: 1px solid rgb(212, 212, 213);
+  padding: 0 15px;
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  font-size: 16px;
+  color: rgb(16, 16, 16);
+  font-family: Roboto;
+
+  .el-dialog__title {
+    font-weight: 600;
+    font-size: 15px;
+    color: rgb(16, 16, 16);
+  }
+
+  .el-dialog__headerbtn {
+    top: 15px;
+    right: 15px;
+  }
+}
+
+/deep/ .el-dialog__body {
+  padding: 55px 15px 0 15px;
+}
+.wrapper {
+  width: 100%;
+  .active {
+    background: linear-gradient(
+      269.2deg,
+      rgba(183, 247, 255, 0.5) 0%,
+      rgba(233, 233, 255, 0) 78.67%
+    );
+    border-radius: 5px 5px 0px 0px;
+  }
+  .three-resource-type {
+    width: 70%;
+    margin: 0 auto;
+    display: flex;
+    border-top: 1px solid rgba(16, 16, 16, 0.1);
+    cursor: pointer;
+    &:first-child {
+      border: none;
+    }
+    .resource-child-node {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 115px;
+      .resource-type-icon {
+        width: 50px;
+        height: 50px;
+        line-height: 20px;
+        border-radius: 25px;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .text {
+          font-size: 26px;
+          color: rgba(251, 251, 251, 1);
+          font-family: ZKXiaoWeiLogo-regular;
+        }
+      }
+      .background-C {
+        background: linear-gradient(
+          134.2deg,
+          rgba(130, 209, 246, 1) 0%,
+          rgba(41, 182, 244, 1) 51.94%,
+          rgba(0, 137, 205, 1) 102.83%
+        );
+      }
+      .background-N {
+        background: linear-gradient(
+          151.47deg,
+          rgba(123, 50, 178, 1) 20.02%,
+          rgba(64, 26, 93, 1) 100%
+        );
+      }
+      .background-G {
+        background: linear-gradient(
+          -25.25deg,
+          rgba(254, 86, 77, 1) 9.3%,
+          rgba(251, 155, 54, 1) 38.86%,
+          rgba(249, 202, 38, 1) 67.95%
+        );
+      }
+    }
+    .resource-type-detail {
+      margin-left: 23px;
+      .detail-title {
+        font-family: SourceHanSansSC;
+        font-weight: 500;
+        font-size: 16px;
+        color: rgb(16, 16, 16);
+        font-style: normal;
+        letter-spacing: 0px;
+        line-height: 32px;
+        text-decoration: none;
+      }
+      .detail-spec {
+        font-family: SourceHanSansSC;
+        font-weight: 400;
+        font-size: 14px;
+        color: rgba(136, 136, 136, 1);
+        font-style: normal;
+        letter-spacing: 0px;
+        line-height: 24px;
+        text-decoration: none;
+      }
+    }
+    .resource-select {
+      margin-left: auto;
+      margin-right: 20px;
+      font-size: 20px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      .green {
+        color: green;
+      }
+      .gray {
+        color: rgba(16, 16, 16, 0.1);
+      }
+    }
+  }
+  .resource-footer {
+    margin-top: 40px;
+    border-top: 1px solid rgba(16, 16, 16, 0.1);
+    height: 71px;
+    display: flex;
+    align-items: center;
+    .resource-operate {
+      display: flex;
+    }
+  }
+  .slide-in-top {
+    -webkit-animation: slide-in-top 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+    animation: slide-in-top 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  }
+  .slide-in-bottom {
+    -webkit-animation: slide-in-bottom 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+    animation: slide-in-bottom 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  }
+  .fade-out {
+    -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+    animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+    position: absolute
+  }
+  @-webkit-keyframes slide-in-top {
+    0% {
+      -webkit-transform: translateY(-50px);
+      transform: translateY(-50px);
+      opacity: 0;
+    }
+    100% {
+      -webkit-transform: translateY(0);
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  @keyframes slide-in-top {
+    0% {
+      -webkit-transform: translateY(-50px);
+      transform: translateY(-50px);
+      opacity: 0;
+    }
+    100% {
+      -webkit-transform: translateY(0);
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  @-webkit-keyframes slide-in-bottom {
+    0% {
+      -webkit-transform: translateY(50px);
+      transform: translateY(50px);
+      opacity: 0;
+    }
+    100% {
+      -webkit-transform: translateY(0);
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  @keyframes slide-in-bottom {
+    0% {
+      -webkit-transform: translateY(50px);
+      transform: translateY(50px);
+      opacity: 0;
+    }
+    100% {
+      -webkit-transform: translateY(0);
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  @-webkit-keyframes fade-in {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  @keyframes fade-in {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  
+}
+</style>

web_src/vuepages/pages/notebook/debug/vp-notebook-debug.js

@@ -0,0 +1,11 @@
+import Vue from 'vue';
+import {Dialog} from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import { i18n, lang } from '~/langs';
+import App from './index.vue';
+
+Vue.use(Dialog)
+new Vue({
+  i18n,
+  render: (h) => h(App),
+}).$mount('#__vue-root');