mirror of
https://github.com/NicolasBohn/NexQuant.git
synced 2026-08-01 17:37:43 +00:00
feat: add a web UI server (#1345)
* update rdagent cmd * fix log error message * use multiProcessing.Process instead of subprocess.Popen * add traces to gitignore * add user interactor in RDLoop (finance scenarios) * add interactor (feedback, hypothesis) for quant scens * fix the test_end in qlib conf * add features init config, general instruction to qlib scenarios * set base features for based exp * fix bug when combine factors * move traces folder to git_ignore_folder * fix bug in features init * fix quant interact bug * fix logger warning error * bug fixes * modify rdagent logger, now it can set file output * adjust cli functions and fix logger bug * fix server port transport problem * update server_ui in cli * add web code * fix CI problem * black fix * update web ui README * update README * update readme
This commit is contained in:
XianBW
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<div class="code">
|
||||
<div class="code-content">
|
||||
<SvgIcon
|
||||
@click="fullScreen"
|
||||
class="expand-icon"
|
||||
color="#2b2b2b"
|
||||
name="fullscreen"
|
||||
></SvgIcon>
|
||||
<SvgIcon
|
||||
@click="copy"
|
||||
class="copy-icon"
|
||||
color="#2b2b2b"
|
||||
name="copy"
|
||||
></SvgIcon>
|
||||
<div
|
||||
class="md-code"
|
||||
:class="{
|
||||
'full-dev': fullScreenFlag && developer,
|
||||
'full-no-dev': fullScreenFlag && !developer,
|
||||
'no-full-dev': !fullScreenFlag && developer,
|
||||
'no-full-no-dev': !fullScreenFlag && !developer,
|
||||
}"
|
||||
>
|
||||
<pre
|
||||
class="code-display language-python"
|
||||
><code v-html="highlightedCode"></code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, defineProps, defineEmits, nextTick } from "vue";
|
||||
// main.js 或 Vue 组件内部
|
||||
import "prismjs";
|
||||
import "prismjs/components/prism-python.min.js"; // 导入Python的语言支持
|
||||
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const props = defineProps({
|
||||
markdown: String,
|
||||
developer: Boolean,
|
||||
fullscreen: Boolean,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["fullScreen"]);
|
||||
const markdown = ref(props.markdown);
|
||||
const developer = ref(props.developer);
|
||||
const highlightedCode = ref("");
|
||||
const fullScreenFlag = ref(props.fullscreen);
|
||||
watch(
|
||||
() => [props.markdown, props.developer, props.fullscreen],
|
||||
(newValue, oldValue) => {
|
||||
markdown.value = newValue[0];
|
||||
developer.value = newValue[1];
|
||||
fullScreenFlag.value = newValue[2];
|
||||
highlightCode();
|
||||
}
|
||||
);
|
||||
|
||||
const highlightCode = () => {
|
||||
// 使用 PrismJS 对 Python 代码进行高亮
|
||||
highlightedCode.value = Prism.highlight(
|
||||
markdown.value,
|
||||
Prism.languages.python,
|
||||
"python"
|
||||
);
|
||||
};
|
||||
|
||||
const copy = () => {
|
||||
navigator.clipboard.writeText(markdown.value);
|
||||
ElMessage({
|
||||
message: "Copy Success.",
|
||||
type: "success",
|
||||
plain: true,
|
||||
});
|
||||
};
|
||||
|
||||
const fullScreen = () => {
|
||||
fullScreenFlag.value = !fullScreenFlag.value;
|
||||
emit("fullScreen", fullScreenFlag.value);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// const codeBlock = document.querySelector("pre code");
|
||||
// hljs.highlightElement(codeBlock);
|
||||
highlightCode();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.code {
|
||||
width: 100%;
|
||||
.code-content {
|
||||
border-radius: 11px;
|
||||
background: var(--bg-white);
|
||||
padding: 1.35em 0 0 0.9em;
|
||||
box-sizing: border-box;
|
||||
overflow-y: hidden;
|
||||
position: relative;
|
||||
|
||||
.expand-icon {
|
||||
position: absolute;
|
||||
right: 3.6em;
|
||||
top: 0.45em;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
width: 1.24em;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-icon {
|
||||
position: absolute;
|
||||
right: 1.35em;
|
||||
top: 0.45em;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
width: 1.24em;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
.md-code {
|
||||
height: calc(100vh - 28.35em);
|
||||
max-width: 100%;
|
||||
font-size: 0.9em;
|
||||
line-height: 140%;
|
||||
overflow: auto;
|
||||
// &:hover {
|
||||
// overflow: auto;
|
||||
// }
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #fff;
|
||||
}
|
||||
&:hover {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #e4e7ff;
|
||||
}
|
||||
}
|
||||
|
||||
&.full-dev {
|
||||
height: calc(100vh - 26.13em);
|
||||
}
|
||||
&.full-no-dev {
|
||||
height: calc(100vh - 19.98em);
|
||||
}
|
||||
&.no-full-dev {
|
||||
height: calc(100vh - 32.8em);
|
||||
}
|
||||
&.no-full-no-dev {
|
||||
height: calc(100vh - 26.1em);
|
||||
}
|
||||
pre {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
display: inline;
|
||||
font-size: 0.9em;
|
||||
margin: 0px;
|
||||
overflow: auto;
|
||||
padding: 0px;
|
||||
white-space: pre;
|
||||
word-break: normal;
|
||||
overflow-wrap: normal;
|
||||
font-family: "consolas", monospace;
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #fff;
|
||||
}
|
||||
&:hover {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #e4e7ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
code {
|
||||
font-family: "consolas", monospace;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user