chore: 将前端移动到 client/ 目录,准备合并为单仓库
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
1f6935e31e
commit
d1c6b8c201
79 files changed
No files matched your search
@@ -0,0 +1 @@
|
||||
chrome >= 90
|
||||
@@ -0,0 +1,4 @@
|
||||
PUBLIC_WEB_URL=http://localhost:8000
|
||||
PUBLIC_BASE_URL=http://localhost:8000/api
|
||||
PUBLIC_ADMIN_URL=http://localhost:8000/admin
|
||||
PUBLIC_MAXKB_URL=https://maxkb.xuyue.cc/chat/api/embed?protocol=https&host=maxkb.xuyue.cc&token=df542e305f27dee6
|
||||
@@ -0,0 +1,5 @@
|
||||
PUBLIC_WEB_URL=https://web.xuyue.cc
|
||||
PUBLIC_ADMIN_URL=https://web.xuyue.cc/admin
|
||||
PUBLIC_BASE_URL=https://web.xuyue.cc/api
|
||||
PUBLIC_MAXKB_URL=https://maxkb.xuyue.cc/chat/api/embed?protocol=https&host=maxkb.xuyue.cc&token=df542e305f27dee6
|
||||
PUBLIC_ICONIFY_URL=https://icon.xuyue.cc
|
||||
@@ -0,0 +1,5 @@
|
||||
PUBLIC_WEB_URL=http://10.13.114.114:91
|
||||
PUBLIC_ADMIN_URL=http://10.13.114.114:91/admin
|
||||
PUBLIC_BASE_URL=http://10.13.114.114:91/api
|
||||
PUBLIC_MAXKB_URL=http://10.13.114.114:92/chat/api/embed?protocol=http&host=10.13.114.114:92&token=df542e305f27dee6
|
||||
PUBLIC_ICONIFY_URL=http://10.13.114.114:8098
|
||||
Vendored
+44
@@ -0,0 +1,44 @@
|
||||
name: Deploy
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
|
||||
jobs:
|
||||
deploy:
|
||||
runs-on: ubuntu-latest
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
include:
|
||||
- name: debian
|
||||
build_command: build
|
||||
remote_port: 22
|
||||
- name: school
|
||||
build_command: build:staging
|
||||
remote_port: 8822
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 24
|
||||
cache: npm
|
||||
- run: npm install
|
||||
- run: npm run ${{ matrix.build_command }}
|
||||
env:
|
||||
CI: false
|
||||
|
||||
- uses: easingthemes/ssh-deploy@main
|
||||
with:
|
||||
SSH_PRIVATE_KEY: ${{ secrets.KEY }}
|
||||
REMOTE_HOST: ${{ secrets.HOST }}
|
||||
REMOTE_PORT: ${{ matrix.remote_port }}
|
||||
ARGS: "-avzr --delete"
|
||||
SOURCE: dist/
|
||||
REMOTE_USER: root
|
||||
TARGET: /root/WebPreview/build
|
||||
@@ -0,0 +1,26 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
.worktrees/
|
||||
*.local
|
||||
components.d.ts
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1 @@
|
||||
semi=false
|
||||
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
web preview
|
||||
@@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-Hans-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="shortcut icon" href="/noto--honeybee.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>前端开发学习平台</title>
|
||||
<link rel="stylesheet" href="/normalize.min.css" />
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
<script>
|
||||
window.localStorage.setItem("maxkbMaskTip", true)
|
||||
</script>
|
||||
<% if (process.env.PUBLIC_MAXKB_URL) { %>
|
||||
<script
|
||||
async
|
||||
defer
|
||||
src="<%= process.env.PUBLIC_MAXKB_URL %>"
|
||||
></script>
|
||||
<% } %>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+3323
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,42 @@
|
||||
{
|
||||
"name": "web",
|
||||
"private": true,
|
||||
"version": "0.3.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "rsbuild dev",
|
||||
"build": "rsbuild build",
|
||||
"build:staging": "rsbuild build --env-mode staging",
|
||||
"fmt": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@codemirror/lang-css": "^6.3.1",
|
||||
"@codemirror/lang-html": "^6.4.12",
|
||||
"@codemirror/lang-javascript": "^6.2.5",
|
||||
"@vueuse/core": "^14.4.0",
|
||||
"axios": "^1.19.0",
|
||||
"codemirror": "^6.0.2",
|
||||
"copy-text-to-clipboard": "^3.2.2",
|
||||
"github-markdown-css": "^5.9.0",
|
||||
"highlight.js": "^11.12.0",
|
||||
"marked": "^18.0.9",
|
||||
"marked-alert": "^2.1.2",
|
||||
"marked-code-preview": "^1.3.7",
|
||||
"marked-highlight": "^2.2.4",
|
||||
"md-editor-v3": "^6.5.6",
|
||||
"naive-ui": "^2.44.1",
|
||||
"vue": "^3.5.41",
|
||||
"vue-codemirror": "^6.1.1",
|
||||
"vue-router": "^5.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify/vue": "^5.0.1",
|
||||
"@rsbuild/core": "^2.1.13",
|
||||
"@rsbuild/plugin-vue": "^2.0.1",
|
||||
"@vue/tsconfig": "^0.9.1",
|
||||
"core-js": "^3.50.0",
|
||||
"prettier": "^3.9.6",
|
||||
"typescript": "^7.0.2",
|
||||
"unplugin-vue-components": "^32.1.0"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
@@ -0,0 +1,93 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>初级网络工程师岗位要求</title>
|
||||
<style>
|
||||
body {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
margin: 20px;
|
||||
}
|
||||
.section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.content {
|
||||
margin-left: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section">
|
||||
<div class="section-title">初级网络工程师岗位要求</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">1. 学历要求</div>
|
||||
<div class="content">
|
||||
通常要求计算机科学、信息技术、通信工程等相关专业的大专或本科学历。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">2. 技术技能</div>
|
||||
<div class="content">
|
||||
<div>熟悉OSI模型、TCP/IP协议、路由与交换等基础概念。</div>
|
||||
<div>能够配置和管理路由器、交换机、防火墙等网络设备。</div>
|
||||
<div>掌握常见网络协议,如HTTP/HTTPS、FTP、DNS、DHCP等。</div>
|
||||
<div>具备基本的网络故障诊断和解决能力。</div>
|
||||
<div>了解基础的网络安全知识,如防火墙配置、VPN、ACL等。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">3. 工具使用</div>
|
||||
<div class="content">
|
||||
<div>熟悉如Wireshark、Nagios、PRTG等工具。</div>
|
||||
<div>了解如Ansible、Puppet等自动化工具。</div>
|
||||
<div>熟悉Windows和Linux操作系统的基本操作。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">4. 软技能</div>
|
||||
<div class="content">
|
||||
<div>能够清晰表达技术问题并与团队有效沟通。</div>
|
||||
<div>具备快速学习新技术的能力。</div>
|
||||
<div>能够在团队中协作完成任务。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">5. 认证要求</div>
|
||||
<div class="content">持有CCNA、HCIA等初级网络认证者优先。</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">6. 工作经验</div>
|
||||
<div class="content">通常要求1-2年相关经验,优秀应届生也可考虑。</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">7. 其他要求</div>
|
||||
<div class="content">
|
||||
<div>具备较强的工作责任心和抗压能力。</div>
|
||||
<div>能够编写技术文档和报告。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">总结</div>
|
||||
<div class="content">
|
||||
初级网络工程师需具备扎实的网络基础知识、设备配置能力、故障排查技能及一定的网络安全知识,同时具备良好的沟通和学习能力,持有相关认证者更具竞争力。
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
/*! jQuery v3.7.1 | (c) OpenJS Foundation and other contributors | jquery.org/license */
|
||||
!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(ie,e){"use strict";var oe=[],r=Object.getPrototypeOf,ae=oe.slice,g=oe.flat?function(e){return oe.flat.call(e)}:function(e){return oe.concat.apply([],e)},s=oe.push,se=oe.indexOf,n={},i=n.toString,ue=n.hasOwnProperty,o=ue.toString,a=o.call(Object),le={},v=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType&&"function"!=typeof e.item},y=function(e){return null!=e&&e===e.window},C=ie.document,u={type:!0,src:!0,nonce:!0,noModule:!0};function m(e,t,n){var r,i,o=(n=n||C).createElement("script");if(o.text=e,t)for(r in u)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function x(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[i.call(e)]||"object":typeof e}var t="3.7.1",l=/HTML$/i,ce=function(e,t){return new ce.fn.init(e,t)};function c(e){var t=!!e&&"length"in e&&e.length,n=x(e);return!v(e)&&!y(e)&&("array"===n||0===t||"number"==typeof t&&0<t&&t-1 in e)}function fe(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()}ce.fn=ce.prototype={jquery:t,constructor:ce,length:0,toArray:function(){return ae.call(this)},get:function(e){return null==e?ae.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=ce.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return ce.each(this,e)},map:function(n){return this.pushStack(ce.map(this,function(e,t){return n.call(e,t,e)}))},slice:function(){return this.pushStack(ae.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},even:function(){return this.pushStack(ce.grep(this,function(e,t){return(t+1)%2}))},odd:function(){return this.pushStack(ce.grep(this,function(e,t){return t%2}))},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(0<=n&&n<t?[this[n]]:[])},end:function(){return this.prevObject||this.constructor()},push:s,sort:oe.sort,splice:oe.splice},ce.extend=ce.fn.extend=function(){var e,t,n,r,i,o,a=arguments[0]||{},s=1,u=arguments.length,l=!1;for("boolean"==typeof a&&(l=a,a=arguments[s]||{},s++),"object"==typeof a||v(a)||(a={}),s===u&&(a=this,s--);s<u;s++)if(null!=(e=arguments[s]))for(t in e)r=e[t],"__proto__"!==t&&a!==r&&(l&&r&&(ce.isPlainObject(r)||(i=Array.isArray(r)))?(n=a[t],o=i&&!Array.isArray(n)?[]:i||ce.isPlainObject(n)?n:{},i=!1,a[t]=ce.extend(l,o,r)):void 0!==r&&(a[t]=r));return a},ce.extend({expando:"jQuery"+(t+Math.random()).replace(/\D/g,""),isReady:!0,error:function(e){throw new Error(e)},noop:function(){},isPlainObject:function(e){var t,n;return!(!e||"[object Object]"!==i.call(e))&&(!(t=r(e))||"function"==typeof(n=ue.call(t,"constructor")&&t.constructor)&&o.call(n)===a)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},globalEval:function(e,t,n){m(e,{nonce:t&&t.nonce},n)},each:function(e,t){var n,r=0;if(c(e)){for(n=e.length;r<n;r++)if(!1===t.call(e[r],r,e[r]))break}else for(r in e)if(!1===t.call(e[r],r,e[r]))break;return e},text:function(e){var t,n="",r=0,i=e.nodeType;if(!i)while(t=e[r++])n+=ce.text(t);return 1===i||11===i?e.textContent:9===i?e.documentElement.textContent:3===i||4===i?e.nodeValue:n},makeArray:function(e,t){var n=t||[];return null!=e&&(c(Object(e))?ce.merge(n,"string"==typeof e?[e]:e):s.call(n,e)),n},inArray:function(e,t,n){return null==t?-1:se.call(t,e,n)},isXMLDoc:function(e){var t=e&&e.namespaceURI,n=e&&(e.ownerDocument||e).documentElement;return!l.test(t||n&&n.nodeName||"HTML")},merge:function(e,t){for(var n=+t.length,r=0,i=e.length;r<n;r++)e[i++]=t[r];return e.length=i,e},grep:function(e,t,n){for(var r=[],i=0,o=e.length,a=!n;i<o;i++)!t(e[i],i)!==a&&r.push(e[i]);return r},map:function(e,t,n){var r,i,o=0,a=[];if(c(e))for(r=e.length;o<r;o++)null!=(i=t(e[o],o,n))&&a.push(i);else for(o in e)null!=(i=t(e[o],o,n))&&a.push(i);return g(a)},guid:1,support:le}),"function"==typeof Symbol&&(ce.fn[Symbol.iterator]=oe[Symbol.iterator]),ce.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(e,t){n["[object "+t+"]"]=t.toLowerCase()});var pe=oe.pop,de=oe.sort,he=oe.splice,ge="[\\x20\\t\\r\\n\\f]",ve=new RegExp("^"+ge+"+|((?:^|[^\\\\])(?:\\\\.)*)"+ge+"+$","g");ce.contains=function(e,t){var n=t&&t.parentNode;return e===n||!(!n||1!==n.nodeType||!(e.contains?e.contains(n):e.compareDocumentPosition&&16&e.compareDocumentPosition(n)))};var f=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\x80-\uFFFF\w-]/g;function p(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e}ce.escapeSelector=function(e){return(e+"").replace(f,p)};var ye=C,me=s;!function(){var e,b,w,o,a,T,r,C,d,i,k=me,S=ce.expando,E=0,n=0,s=W(),c=W(),u=W(),h=W(),l=function(e,t){return e===t&&(a=!0),0},f="checked|selected|async|autofocus|autoplay|conLine truncated
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 200 KiB |
@@ -0,0 +1,4 @@
|
||||
@font-face {
|
||||
font-family: "Monaco";
|
||||
src: url(/Monaco.ttf);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { defineConfig } from "@rsbuild/core"
|
||||
import { pluginVue } from "@rsbuild/plugin-vue"
|
||||
import { NaiveUiResolver } from "unplugin-vue-components/resolvers"
|
||||
import Components from "unplugin-vue-components/rspack"
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [pluginVue()],
|
||||
html: {
|
||||
template: "./index.html",
|
||||
},
|
||||
source: {
|
||||
include: [/node_modules[\\/]marked[\\/]/],
|
||||
entry: {
|
||||
index: "./src/main.ts",
|
||||
},
|
||||
},
|
||||
output: {
|
||||
target: "web",
|
||||
polyfill: "usage",
|
||||
},
|
||||
tools: {
|
||||
rspack: {
|
||||
plugins: [
|
||||
Components({
|
||||
resolvers: [NaiveUiResolver()],
|
||||
}),
|
||||
],
|
||||
},
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
"/media": {
|
||||
target: process.env.PUBLIC_WEB_URL,
|
||||
changeOrigin: true,
|
||||
},
|
||||
"/ws": {
|
||||
target: process.env.PUBLIC_WEB_URL,
|
||||
ws: true,
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,64 @@
|
||||
<script setup lang="ts">
|
||||
import { dateZhCN, zhCN } from "naive-ui"
|
||||
import type { GlobalThemeOverrides } from "naive-ui"
|
||||
import Login from "./components/Login.vue"
|
||||
import { onMounted, watch } from "vue"
|
||||
import { Account } from "./api"
|
||||
import { authed, user } from "./store/user"
|
||||
import { STORAGE_KEY } from "./utils/const"
|
||||
import hljs from "highlight.js/lib/core"
|
||||
|
||||
const themeOverrides: GlobalThemeOverrides = {
|
||||
common: {
|
||||
borderRadius: "6px",
|
||||
borderRadiusSmall: "4px",
|
||||
},
|
||||
Card: {
|
||||
borderRadius: "8px",
|
||||
},
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const data = await Account.getMyProfile()
|
||||
user.loaded = true
|
||||
user.username = data.username
|
||||
user.role = data.role
|
||||
} catch {
|
||||
user.loaded = true
|
||||
}
|
||||
})
|
||||
|
||||
watch(authed, (v) => {
|
||||
if (v) {
|
||||
localStorage.setItem(STORAGE_KEY.LOGIN, "true")
|
||||
} else {
|
||||
localStorage.removeItem(STORAGE_KEY.LOGIN)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-config-provider
|
||||
class="myContainer"
|
||||
:locale="zhCN"
|
||||
:date-locale="dateZhCN"
|
||||
:hljs="hljs"
|
||||
:theme-overrides="themeOverrides"
|
||||
>
|
||||
<n-modal-provider>
|
||||
<n-message-provider :max="1">
|
||||
<n-dialog-provider>
|
||||
<router-view></router-view>
|
||||
<Login />
|
||||
</n-dialog-provider>
|
||||
</n-message-provider>
|
||||
</n-modal-provider>
|
||||
</n-config-provider>
|
||||
</template>
|
||||
<style scoped>
|
||||
.myContainer {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,531 @@
|
||||
import axios from "axios"
|
||||
import { router } from "./router"
|
||||
import type {
|
||||
TutorialIn,
|
||||
ChallengeIn,
|
||||
FlagType,
|
||||
SubmissionOut,
|
||||
PromptMessage,
|
||||
PromptHistoryItem,
|
||||
TaskStatsOut,
|
||||
TaskAsset,
|
||||
AwardSection,
|
||||
AwardManageIn,
|
||||
AwardManageOut,
|
||||
AwardItemIn,
|
||||
AwardItemUpdateIn,
|
||||
AwardItemManageOut,
|
||||
GradebookOut,
|
||||
GradebookQuery,
|
||||
ShowcaseSubmissionLookupOut,
|
||||
ShowcaseDetail,
|
||||
PromptRound,
|
||||
RandomRatingItem,
|
||||
CreationSlim,
|
||||
CreationDetail,
|
||||
CreationIn,
|
||||
} from "./utils/type"
|
||||
import { BASE_URL, STORAGE_KEY } from "./utils/const"
|
||||
|
||||
const http = axios.create({
|
||||
baseURL: BASE_URL,
|
||||
xsrfCookieName: "xsrfCookieName",
|
||||
xsrfHeaderName: "X-CSRFTOKEN",
|
||||
withCredentials: true,
|
||||
})
|
||||
|
||||
http.interceptors.response.use(
|
||||
(res) => {
|
||||
return res
|
||||
},
|
||||
(err) => {
|
||||
if (err.response) {
|
||||
switch (err.response.status) {
|
||||
case 401: // 未授权
|
||||
localStorage.removeItem(STORAGE_KEY.LOGIN)
|
||||
router.push("/")
|
||||
break
|
||||
case 403: // 禁止访问
|
||||
alert("权限不够,禁止访问")
|
||||
router.push("/")
|
||||
break
|
||||
default:
|
||||
console.error("出现错误:", err.response.status, err.response.data)
|
||||
}
|
||||
} else {
|
||||
console.error("出现错误:", err.message)
|
||||
}
|
||||
return Promise.reject(err)
|
||||
},
|
||||
)
|
||||
|
||||
export const Account = {
|
||||
async login(username: string, password: string) {
|
||||
const res = await http.post("/account/login", { username, password })
|
||||
return res.data
|
||||
},
|
||||
|
||||
async logout() {
|
||||
const res = await http.post("/account/logout")
|
||||
return res.data
|
||||
},
|
||||
|
||||
async getMyProfile() {
|
||||
const res = await http.get("/account/profile")
|
||||
return res.data
|
||||
},
|
||||
|
||||
async list(query: { username: string; page: number }) {
|
||||
const res = await http.get("/account/list", {
|
||||
params: query,
|
||||
})
|
||||
return res.data
|
||||
},
|
||||
|
||||
async toggleActive(id: number) {
|
||||
const res = await http.put(`/account/active/${id}`)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async batchCreate(payload: { classname: string; names: string[] }) {
|
||||
const res = await http.post("/account/batch", payload)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async listClasses(): Promise<string[]> {
|
||||
const res = await http.get("/account/classes")
|
||||
return res.data
|
||||
},
|
||||
|
||||
async listNamesByClass(
|
||||
classname: string,
|
||||
): Promise<{ name: string; username: string }[]> {
|
||||
const res = await http.get("/account/names", { params: { classname } })
|
||||
return res.data
|
||||
},
|
||||
}
|
||||
|
||||
export const Tutorial = {
|
||||
async list() {
|
||||
const res = await http.get("/tutorial/list")
|
||||
return res.data
|
||||
},
|
||||
|
||||
async createOrUpdate(payload: TutorialIn) {
|
||||
const res = await http.post("/tutorial/", payload)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async togglePublic(display: number) {
|
||||
const res = await http.put(`/tutorial/public/${display}`)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async remove(display: number) {
|
||||
await http.delete(`/tutorial/${display}`)
|
||||
},
|
||||
|
||||
async get(display: number) {
|
||||
const res = await http.get(`/tutorial/${display}`)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async listDisplay() {
|
||||
const res = await http.get("/tutorial/display")
|
||||
return res.data
|
||||
},
|
||||
}
|
||||
|
||||
export const Challenge = {
|
||||
async list() {
|
||||
const res = await http.get("/challenge/list")
|
||||
return res.data
|
||||
},
|
||||
|
||||
async createOrUpdate(payload: ChallengeIn) {
|
||||
const res = await http.post("/challenge/", payload)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async togglePublic(display: number) {
|
||||
const res = await http.put(`/challenge/public/${display}`)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async remove(display: number) {
|
||||
await http.delete(`/challenge/${display}`)
|
||||
},
|
||||
|
||||
async get(display: number) {
|
||||
const res = await http.get(`/challenge/${display}`)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async listDisplay() {
|
||||
const res = await http.get("/challenge/display")
|
||||
return res.data
|
||||
},
|
||||
}
|
||||
|
||||
export const Creation = {
|
||||
async listMine(): Promise<CreationSlim[]> {
|
||||
const res = await http.get("/creation/mine")
|
||||
return res.data
|
||||
},
|
||||
|
||||
async create(payload: CreationIn): Promise<CreationDetail> {
|
||||
const res = await http.post("/creation/", payload)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async get(display: number): Promise<CreationDetail> {
|
||||
const res = await http.get(`/creation/${display}`)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async update(display: number, payload: CreationIn): Promise<CreationDetail> {
|
||||
const res = await http.put(`/creation/${display}`, payload)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async saveCode(
|
||||
display: number,
|
||||
code: { html: string; css: string; js: string },
|
||||
): Promise<CreationDetail> {
|
||||
const res = await http.put(`/creation/${display}/code`, code)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async remove(display: number) {
|
||||
const res = await http.delete(`/creation/${display}`)
|
||||
return res.data
|
||||
},
|
||||
}
|
||||
|
||||
export const Submission = {
|
||||
async create(
|
||||
taskId: number,
|
||||
code: {
|
||||
html?: string
|
||||
css?: string
|
||||
js?: string
|
||||
prompt?: string
|
||||
},
|
||||
messageId?: number,
|
||||
) {
|
||||
const { prompt, ...rest } = code
|
||||
const data = {
|
||||
task_id: taskId,
|
||||
...rest,
|
||||
prompt: prompt || null,
|
||||
message_id: messageId ?? null,
|
||||
}
|
||||
const res = await http.post("/submission/", data)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async list(query: {
|
||||
page: number
|
||||
page_size?: number
|
||||
username?: string
|
||||
user_id?: number
|
||||
flag?: string | null
|
||||
zone?: string
|
||||
task_id?: number
|
||||
task_type?: string
|
||||
score_min?: number
|
||||
score_max_exclusive?: number
|
||||
score_lt_threshold?: number
|
||||
ordering?: string
|
||||
grouped?: boolean
|
||||
}) {
|
||||
const res = await http.get("/submission", {
|
||||
params: query,
|
||||
})
|
||||
return res.data
|
||||
},
|
||||
|
||||
async listByUserTask(userId: number, taskId: number) {
|
||||
const res = await http.get("/submission/by-user-task", {
|
||||
params: { user_id: userId, task_id: taskId },
|
||||
})
|
||||
return res.data as SubmissionOut[]
|
||||
},
|
||||
|
||||
async get(id: string) {
|
||||
const res = await http.get("/submission/" + id)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async getPromptChain(id: string): Promise<PromptRound[]> {
|
||||
const res = await http.get(`/submission/${id}/prompt-chain`)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async delete(id: string) {
|
||||
const res = await http.delete("/submission/" + id)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async incrementView(id: string) {
|
||||
await http.post(`/submission/${id}/view`)
|
||||
},
|
||||
|
||||
async updateScore(id: string, score: number) {
|
||||
const res = await http.put(`/submission/${id}/score`, { score })
|
||||
return res.data
|
||||
},
|
||||
|
||||
async randomForRating(excludeId?: string) {
|
||||
const res = await http.get("/submission/random-for-rating/", {
|
||||
params: excludeId ? { exclude_id: excludeId } : {},
|
||||
})
|
||||
return res.data as RandomRatingItem | null
|
||||
},
|
||||
|
||||
async updateFlag(id: string, flag: FlagType) {
|
||||
const res = await http.put(`/submission/${id}/flag`, { flag })
|
||||
return res.data
|
||||
},
|
||||
|
||||
async clearAllFlags() {
|
||||
const res = await http.delete(`/submission/flags`)
|
||||
return res.data as { cleared: number }
|
||||
},
|
||||
|
||||
async getStats(taskId: number, classname?: string): Promise<TaskStatsOut> {
|
||||
const params: Record<string, string | number> = {}
|
||||
if (classname) params.classname = classname
|
||||
const res = await http.get(`/submission/stats/${taskId}`, { params })
|
||||
return res.data as TaskStatsOut
|
||||
},
|
||||
}
|
||||
|
||||
function gradebookParams(query: GradebookQuery) {
|
||||
const params: Record<string, string | boolean> = {
|
||||
classname: query.classname,
|
||||
}
|
||||
if (query.task_type) params.task_type = query.task_type
|
||||
if (query.username) params.username = query.username
|
||||
if (query.include_all_tasks) params.include_all_tasks = true
|
||||
return params
|
||||
}
|
||||
|
||||
function filenameFromDisposition(
|
||||
disposition: string | undefined,
|
||||
fallback: string,
|
||||
) {
|
||||
const match = disposition?.match(/filename\*=UTF-8''([^;]+)/)
|
||||
return match ? decodeURIComponent(match[1]) : fallback
|
||||
}
|
||||
|
||||
export const Gradebook = {
|
||||
async get(query: GradebookQuery): Promise<GradebookOut> {
|
||||
const res = await http.get("/submission/gradebook/", {
|
||||
params: gradebookParams(query),
|
||||
})
|
||||
return res.data
|
||||
},
|
||||
|
||||
async downloadCsv(query: GradebookQuery) {
|
||||
const res = await http.get("/submission/gradebook/export/", {
|
||||
params: gradebookParams(query),
|
||||
responseType: "blob",
|
||||
})
|
||||
const blob = new Blob([res.data], { type: "text/csv;charset=utf-8" })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement("a")
|
||||
a.href = url
|
||||
a.download = filenameFromDisposition(
|
||||
res.headers["content-disposition"],
|
||||
`gradebook-${query.classname}.csv`,
|
||||
)
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
},
|
||||
}
|
||||
|
||||
export const Prompt = {
|
||||
async listConversations(taskId?: number, userId?: number) {
|
||||
const params: Record<string, number> = {}
|
||||
if (taskId) params.task_id = taskId
|
||||
if (userId) params.user_id = userId
|
||||
return (await http.get("/prompt/conversations/", { params })).data
|
||||
},
|
||||
|
||||
async listHistory(taskId: number): Promise<PromptHistoryItem[]> {
|
||||
const res = await http.get(`/prompt/history/${taskId}`)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async getMessages(conversationId: string): Promise<PromptMessage[]> {
|
||||
return (
|
||||
await http.get<PromptMessage[]>(
|
||||
`/prompt/conversations/${conversationId}/messages/`,
|
||||
)
|
||||
).data
|
||||
},
|
||||
|
||||
async getMessagesByUserTask(
|
||||
taskId: number,
|
||||
userId: number,
|
||||
): Promise<PromptMessage[]> {
|
||||
const convs = await this.listConversations(taskId, userId)
|
||||
if (!convs.length) return []
|
||||
return this.getMessages(convs[0].id)
|
||||
},
|
||||
|
||||
async deleteMessagePair(
|
||||
messageId: number,
|
||||
): Promise<{ deleted: boolean; submission_deleted: boolean }> {
|
||||
const res = await http.delete(`/prompt/messages/${messageId}/pair`)
|
||||
return res.data
|
||||
},
|
||||
}
|
||||
|
||||
export const Helper = {
|
||||
async upload(file: File) {
|
||||
const form = new window.FormData()
|
||||
form.append("image", file)
|
||||
const res = await http.post("/upload/", form, {
|
||||
headers: { "content-type": "multipart/form-data" },
|
||||
})
|
||||
return !!res.data.url ? res.data.url : ""
|
||||
},
|
||||
}
|
||||
|
||||
export const Showcase = {
|
||||
async list(): Promise<AwardSection[]> {
|
||||
const res = await http.get("/submission/showcase/")
|
||||
return res.data
|
||||
},
|
||||
|
||||
async listManageAwards(): Promise<AwardManageOut[]> {
|
||||
const res = await http.get("/submission/showcase/manage/awards")
|
||||
return res.data
|
||||
},
|
||||
|
||||
async createAward(payload: AwardManageIn): Promise<AwardManageOut> {
|
||||
const res = await http.post("/submission/showcase/manage/awards", payload)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async updateAward(
|
||||
id: number,
|
||||
payload: AwardManageIn,
|
||||
): Promise<AwardManageOut> {
|
||||
const res = await http.put(
|
||||
`/submission/showcase/manage/awards/${id}`,
|
||||
payload,
|
||||
)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async deleteAward(id: number) {
|
||||
const res = await http.delete(`/submission/showcase/manage/awards/${id}`)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async listAwardItems(id: number): Promise<AwardItemManageOut[]> {
|
||||
const res = await http.get(`/submission/showcase/manage/awards/${id}/items`)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async findSubmissionForAward(
|
||||
submissionId: string,
|
||||
): Promise<ShowcaseSubmissionLookupOut> {
|
||||
const res = await http.get(
|
||||
`/submission/showcase/manage/submissions/${submissionId}`,
|
||||
)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async addAwardItem(
|
||||
id: number,
|
||||
payload: AwardItemIn,
|
||||
): Promise<AwardItemManageOut> {
|
||||
const res = await http.post(
|
||||
`/submission/showcase/manage/awards/${id}/items`,
|
||||
payload,
|
||||
)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async updateAwardItem(
|
||||
itemId: number,
|
||||
payload: AwardItemUpdateIn,
|
||||
): Promise<AwardItemManageOut> {
|
||||
const res = await http.put(
|
||||
`/submission/showcase/manage/items/${itemId}`,
|
||||
payload,
|
||||
)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async deleteAwardItem(itemId: number) {
|
||||
const res = await http.delete(`/submission/showcase/manage/items/${itemId}`)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async refreshAwardItem(itemId: number): Promise<AwardItemManageOut> {
|
||||
const res = await http.put(
|
||||
`/submission/showcase/manage/items/${itemId}/refresh`,
|
||||
)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async getDetail(submissionId: string): Promise<ShowcaseDetail> {
|
||||
const res = await http.get(`/submission/showcase/${submissionId}/`)
|
||||
return res.data
|
||||
},
|
||||
|
||||
async getPromptChain(submissionId: string): Promise<PromptRound[]> {
|
||||
const res = await http.get(
|
||||
`/submission/showcase/${submissionId}/prompt-chain/`,
|
||||
)
|
||||
return res.data
|
||||
},
|
||||
}
|
||||
|
||||
export const TaskAssets = {
|
||||
async listChallenge(display: number): Promise<TaskAsset[]> {
|
||||
return (await http.get<TaskAsset[]>(`/assets/challenge/${display}`)).data
|
||||
},
|
||||
async uploadChallenge(
|
||||
display: number,
|
||||
name: string,
|
||||
file: File,
|
||||
): Promise<TaskAsset> {
|
||||
const form = new window.FormData()
|
||||
form.append("name", name)
|
||||
form.append("file", file)
|
||||
return (
|
||||
await http.post<TaskAsset>(`/assets/challenge/${display}`, form, {
|
||||
headers: { "content-type": "multipart/form-data" },
|
||||
})
|
||||
).data
|
||||
},
|
||||
async deleteChallenge(display: number, name: string) {
|
||||
return (await http.delete(`/assets/challenge/${display}/${name}`)).data
|
||||
},
|
||||
async listTutorial(display: number): Promise<TaskAsset[]> {
|
||||
return (await http.get<TaskAsset[]>(`/assets/tutorial/${display}`)).data
|
||||
},
|
||||
async uploadTutorial(
|
||||
display: number,
|
||||
name: string,
|
||||
file: File,
|
||||
): Promise<TaskAsset> {
|
||||
const form = new window.FormData()
|
||||
form.append("name", name)
|
||||
form.append("file", file)
|
||||
return (
|
||||
await http.post<TaskAsset>(`/assets/tutorial/${display}`, form, {
|
||||
headers: { "content-type": "multipart/form-data" },
|
||||
})
|
||||
).data
|
||||
},
|
||||
async deleteTutorial(display: number, name: string) {
|
||||
return (await http.delete(`/assets/tutorial/${display}/${name}`)).data
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<n-modal
|
||||
preset="card"
|
||||
title="登录"
|
||||
style="width: 420px"
|
||||
v-model:show="loginModal"
|
||||
>
|
||||
<n-tabs v-model:value="activeTab" @update:value="onTabChange">
|
||||
<n-tab-pane name="student" tab="学生登录">
|
||||
<n-form>
|
||||
<n-form-item label="班级">
|
||||
<n-select
|
||||
v-model:value="selectedClass"
|
||||
:options="classOptions"
|
||||
placeholder="选择班级"
|
||||
:loading="classesLoading"
|
||||
@update:value="onClassChange"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="姓名">
|
||||
<n-select
|
||||
v-model:value="selectedUsername"
|
||||
:options="nameOptions"
|
||||
placeholder="选择姓名"
|
||||
:loading="namesLoading"
|
||||
:disabled="!selectedClass || namesLoading"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="密码">
|
||||
<n-input
|
||||
type="password"
|
||||
v-model:value="studentPassword"
|
||||
name="password"
|
||||
@keyup.enter="submitStudent"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-alert
|
||||
type="error"
|
||||
v-if="classesError"
|
||||
class="message"
|
||||
title="加载班级列表失败,请刷新重试"
|
||||
/>
|
||||
<n-alert
|
||||
type="error"
|
||||
v-if="namesError"
|
||||
class="message"
|
||||
title="加载姓名列表失败,请重新选择班级"
|
||||
/>
|
||||
<n-alert
|
||||
type="error"
|
||||
v-if="showStudentError"
|
||||
class="message"
|
||||
title="登录失败,请检查密码"
|
||||
/>
|
||||
<n-button
|
||||
block
|
||||
type="primary"
|
||||
:loading="studentLoading"
|
||||
:disabled="!selectedClass || !selectedUsername || !studentPassword"
|
||||
@click="submitStudent"
|
||||
>
|
||||
登录
|
||||
</n-button>
|
||||
</n-form>
|
||||
</n-tab-pane>
|
||||
|
||||
<n-tab-pane name="admin" tab="管理员登录">
|
||||
<n-form>
|
||||
<n-form-item label="用户名">
|
||||
<n-input v-model:value="adminName" name="username" />
|
||||
</n-form-item>
|
||||
<n-form-item label="密码">
|
||||
<n-input
|
||||
type="password"
|
||||
v-model:value="adminPassword"
|
||||
name="password"
|
||||
@keyup.enter="submitAdmin"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-alert
|
||||
type="error"
|
||||
v-if="showAdminError"
|
||||
class="message"
|
||||
title="登录失败,请检查用户名和密码"
|
||||
/>
|
||||
<n-button
|
||||
block
|
||||
type="primary"
|
||||
:loading="adminLoading"
|
||||
:disabled="!adminName || !adminPassword"
|
||||
@click="submitAdmin"
|
||||
>
|
||||
登录
|
||||
</n-button>
|
||||
</n-form>
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, onMounted } from "vue"
|
||||
import { Account } from "../api"
|
||||
import { loginModal } from "../store/modal"
|
||||
import { user } from "../store/user"
|
||||
import { router } from "../router"
|
||||
|
||||
// Tab state
|
||||
const activeTab = ref("student")
|
||||
|
||||
// Student tab state
|
||||
const selectedClass = ref<string | null>(null)
|
||||
const selectedUsername = ref<string | null>(null)
|
||||
const studentPassword = ref("")
|
||||
const studentLoading = ref(false)
|
||||
const showStudentError = ref(false)
|
||||
|
||||
// Classes data
|
||||
const classes = ref<string[]>([])
|
||||
const classesLoading = ref(false)
|
||||
const classesError = ref(false)
|
||||
const classOptions = computed(() =>
|
||||
classes.value.map((c) => ({ label: c, value: c })),
|
||||
)
|
||||
|
||||
// Names data
|
||||
const names = ref<{ name: string; username: string }[]>([])
|
||||
const namesLoading = ref(false)
|
||||
const namesError = ref(false)
|
||||
const nameOptions = computed(() =>
|
||||
names.value.map((n) => ({ label: n.name, value: n.username })),
|
||||
)
|
||||
|
||||
// Admin tab state
|
||||
const adminName = ref("")
|
||||
const adminPassword = ref("")
|
||||
const adminLoading = ref(false)
|
||||
const showAdminError = ref(false)
|
||||
|
||||
// Load classes on mount (cached — not reloaded on tab switch)
|
||||
onMounted(async () => {
|
||||
classesLoading.value = true
|
||||
classesError.value = false
|
||||
try {
|
||||
classes.value = await Account.listClasses()
|
||||
} catch {
|
||||
classesError.value = true
|
||||
} finally {
|
||||
classesLoading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
function onTabChange() {
|
||||
// Reset student tab state
|
||||
selectedClass.value = null
|
||||
selectedUsername.value = null
|
||||
studentPassword.value = ""
|
||||
showStudentError.value = false
|
||||
namesError.value = false
|
||||
names.value = []
|
||||
// Reset admin tab state
|
||||
adminName.value = ""
|
||||
adminPassword.value = ""
|
||||
showAdminError.value = false
|
||||
}
|
||||
|
||||
async function onClassChange(classname: string) {
|
||||
selectedUsername.value = null
|
||||
names.value = []
|
||||
namesError.value = false
|
||||
namesLoading.value = true
|
||||
try {
|
||||
names.value = await Account.listNamesByClass(classname)
|
||||
} catch {
|
||||
namesError.value = true
|
||||
} finally {
|
||||
namesLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function submitStudent() {
|
||||
if (!selectedUsername.value || !studentPassword.value) return
|
||||
studentLoading.value = true
|
||||
showStudentError.value = false
|
||||
try {
|
||||
const data = await Account.login(
|
||||
selectedUsername.value,
|
||||
studentPassword.value,
|
||||
)
|
||||
user.username = data.username
|
||||
user.role = data.role
|
||||
user.loaded = true
|
||||
loginModal.value = false
|
||||
router.replace(
|
||||
window.location.pathname + window.location.search + window.location.hash,
|
||||
)
|
||||
} catch {
|
||||
showStudentError.value = true
|
||||
} finally {
|
||||
studentLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function submitAdmin() {
|
||||
if (!adminName.value || !adminPassword.value) return
|
||||
adminLoading.value = true
|
||||
showAdminError.value = false
|
||||
try {
|
||||
const data = await Account.login(adminName.value, adminPassword.value)
|
||||
user.username = data.username
|
||||
user.role = data.role
|
||||
user.loaded = true
|
||||
loginModal.value = false
|
||||
router.replace(
|
||||
window.location.pathname + window.location.search + window.location.hash,
|
||||
)
|
||||
} catch {
|
||||
showAdminError.value = true
|
||||
} finally {
|
||||
adminLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.message {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div class="external-panel">
|
||||
<div class="content-area">
|
||||
<div class="field-label">提示词</div>
|
||||
<n-input
|
||||
v-model:value="promptText"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 3, maxRows: 8 }"
|
||||
placeholder="粘贴你发给外部 AI 的提示词..."
|
||||
/>
|
||||
<div class="code-field">
|
||||
<div class="field-label" style="margin-top: 12px">完整的代码</div>
|
||||
<n-input
|
||||
v-model:value="rawCode"
|
||||
type="textarea"
|
||||
class="code-input"
|
||||
placeholder="粘贴完整的前端代码..."
|
||||
/>
|
||||
</div>
|
||||
<div v-if="splitResult" class="split-result">
|
||||
<n-tag size="small" type="success"
|
||||
>HTML · {{ splitResult.html.length }} 字符</n-tag
|
||||
>
|
||||
<n-tag size="small" type="info"
|
||||
>CSS · {{ splitResult.css.length }} 字符</n-tag
|
||||
>
|
||||
<n-tag size="small" type="warning"
|
||||
>JS · {{ splitResult.js.length }} 字符</n-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<n-button :disabled="!rawCode.trim()" @click="applyPreview"
|
||||
>应用预览</n-button
|
||||
>
|
||||
<n-button
|
||||
type="primary"
|
||||
:disabled="!splitResult || !promptText.trim()"
|
||||
:loading="submitting"
|
||||
@click="submit"
|
||||
>
|
||||
提交
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue"
|
||||
import { useMessage } from "naive-ui"
|
||||
import { html, css, js } from "../../store/editors"
|
||||
import { Submission } from "../../api"
|
||||
|
||||
const props = defineProps<{ taskId: number }>()
|
||||
const emit = defineEmits<{
|
||||
submitted: []
|
||||
}>()
|
||||
const message = useMessage()
|
||||
|
||||
const promptText = ref("")
|
||||
const rawCode = ref("")
|
||||
const splitResult = ref<{ html: string; css: string; js: string } | null>(null)
|
||||
const submitting = ref(false)
|
||||
|
||||
watch(rawCode, () => {
|
||||
splitResult.value = null
|
||||
})
|
||||
|
||||
function splitHtml(raw: string): { html: string; css: string; js: string } {
|
||||
let result = raw
|
||||
const cssBlocks: string[] = []
|
||||
const jsBlocks: string[] = []
|
||||
|
||||
result = result.replace(/<style[^>]*>([\s\S]*?)<\/style>/gi, (_, content) => {
|
||||
cssBlocks.push(content.trim())
|
||||
return ""
|
||||
})
|
||||
result = result.replace(
|
||||
/<script(?![^>]*\bsrc\b)[^>]*>([\s\S]*?)<\/script>/gi,
|
||||
(_, content) => {
|
||||
jsBlocks.push(content.trim())
|
||||
return ""
|
||||
},
|
||||
)
|
||||
|
||||
return {
|
||||
html: result.trim(),
|
||||
css: cssBlocks.join("\n\n"),
|
||||
js: jsBlocks.join("\n\n"),
|
||||
}
|
||||
}
|
||||
|
||||
function applyPreview() {
|
||||
const result = splitHtml(rawCode.value)
|
||||
splitResult.value = result
|
||||
html.value = result.html
|
||||
css.value = result.css
|
||||
js.value = result.js
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
if (!splitResult.value) return
|
||||
submitting.value = true
|
||||
try {
|
||||
await Submission.create(props.taskId, {
|
||||
html: splitResult.value.html,
|
||||
css: splitResult.value.css,
|
||||
js: splitResult.value.js,
|
||||
prompt: promptText.value.trim(),
|
||||
})
|
||||
emit("submitted")
|
||||
message.success("提交成功")
|
||||
promptText.value = ""
|
||||
rawCode.value = ""
|
||||
splitResult.value = null
|
||||
} catch {
|
||||
message.error("提交失败,请重试")
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.external-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.code-field {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.code-input {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.code-input :deep(.n-input__textarea) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.code-input :deep(.n-input__textarea-el) {
|
||||
height: 100%;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.split-result {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
padding: 12px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<n-modal
|
||||
:show="isOpen"
|
||||
preset="card"
|
||||
title="调教提示词"
|
||||
style="width: min(560px, 92vw)"
|
||||
:mask-closable="!streaming"
|
||||
@update:show="onModalClose"
|
||||
>
|
||||
<div class="guidance-body">
|
||||
<div class="guidance-messages" ref="messagesRef">
|
||||
<div
|
||||
v-for="(msg, i) in messages"
|
||||
:key="msg.id ?? i"
|
||||
class="guidance-msg"
|
||||
:class="msg.role"
|
||||
>
|
||||
<div class="msg-role">{{ msg.role === "user" ? "你" : "AI" }}</div>
|
||||
<div class="msg-content" v-html="renderMarkdown(msg.content)"></div>
|
||||
</div>
|
||||
|
||||
<div v-if="streaming" class="guidance-msg assistant">
|
||||
<div class="msg-role">AI</div>
|
||||
<div v-if="!displayStreamingContent" class="typing-indicator">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="msg-content"
|
||||
v-html="renderMarkdown(displayStreamingContent)"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isReady" class="ready-hint">
|
||||
<Icon icon="lucide:check-circle" :width="16" />
|
||||
提示词已优化,可以生成代码了!
|
||||
</div>
|
||||
|
||||
<div class="guidance-input">
|
||||
<n-input
|
||||
v-model:value="draftPrompt"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 5 }"
|
||||
placeholder="修改你的提示词后发送..."
|
||||
:disabled="streaming"
|
||||
@keydown.enter.exact.prevent="send"
|
||||
/>
|
||||
<n-flex justify="space-between" align="center" style="margin-top: 8px">
|
||||
<div>
|
||||
<n-button
|
||||
v-if="streaming"
|
||||
type="error"
|
||||
size="small"
|
||||
@click="stopGuidance"
|
||||
>
|
||||
停止
|
||||
</n-button>
|
||||
<n-button
|
||||
v-else
|
||||
size="small"
|
||||
:disabled="!draftPrompt.trim() || !connected"
|
||||
@click="send"
|
||||
>
|
||||
发送
|
||||
</n-button>
|
||||
</div>
|
||||
<n-button
|
||||
:type="isReady ? 'primary' : 'default'"
|
||||
size="small"
|
||||
:disabled="!draftPrompt.trim()"
|
||||
@click="generate"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon icon="lucide:play" :width="14" />
|
||||
</template>
|
||||
生成代码
|
||||
</n-button>
|
||||
</n-flex>
|
||||
</div>
|
||||
</div>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, nextTick } from "vue"
|
||||
import { Icon } from "@iconify/vue"
|
||||
import { renderMarkdown } from "../../utils/markdown"
|
||||
import {
|
||||
messages,
|
||||
streaming,
|
||||
streamingContent,
|
||||
isReady,
|
||||
isOpen,
|
||||
connected,
|
||||
initialPrompt,
|
||||
sendGuidance,
|
||||
stopGuidance,
|
||||
closeGuidance,
|
||||
} from "../../store/guidance"
|
||||
|
||||
const emit = defineEmits<{
|
||||
generate: [prompt: string]
|
||||
}>()
|
||||
|
||||
const draftPrompt = ref("")
|
||||
const messagesRef = ref<HTMLElement>()
|
||||
|
||||
const displayStreamingContent = computed(() =>
|
||||
streamingContent.value.replace(/^\[READY\]\n?/, "")
|
||||
)
|
||||
|
||||
function send() {
|
||||
const text = draftPrompt.value.trim()
|
||||
if (!text || streaming.value) return
|
||||
sendGuidance(text)
|
||||
}
|
||||
|
||||
function generate() {
|
||||
const text = draftPrompt.value.trim()
|
||||
if (!text) return
|
||||
emit("generate", text)
|
||||
closeGuidance()
|
||||
}
|
||||
|
||||
function onModalClose(show: boolean) {
|
||||
if (!show && !streaming.value) closeGuidance()
|
||||
}
|
||||
|
||||
watch(isOpen, (val) => {
|
||||
if (val) draftPrompt.value = initialPrompt.value
|
||||
})
|
||||
|
||||
watch([() => messages.value.length, streamingContent], () => {
|
||||
nextTick(() => {
|
||||
if (messagesRef.value) {
|
||||
messagesRef.value.scrollTop = messagesRef.value.scrollHeight
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.guidance-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.guidance-messages {
|
||||
min-height: 160px;
|
||||
max-height: 360px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.guidance-msg .msg-role {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 4px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.guidance-msg.user .msg-role {
|
||||
color: #2080f0;
|
||||
}
|
||||
|
||||
.guidance-msg.assistant .msg-role {
|
||||
color: #18a058;
|
||||
}
|
||||
|
||||
.guidance-msg.assistant .msg-content {
|
||||
background: #f0f7ff;
|
||||
border-left: 3px solid #2080f0;
|
||||
padding: 8px 12px;
|
||||
border-radius: 0 6px 6px 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.guidance-msg.user .msg-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.msg-content :deep(p) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ready-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: #18a058;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
padding: 6px 10px;
|
||||
background: #f0fff4;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #b8e8cc;
|
||||
}
|
||||
|
||||
.typing-indicator {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.typing-indicator span {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #2080f0;
|
||||
animation: bounce 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.typing-indicator span:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.typing-indicator span:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%,
|
||||
60%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 0.4;
|
||||
}
|
||||
30% {
|
||||
transform: translateY(-5px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,367 @@
|
||||
<template>
|
||||
<div class="history-panel">
|
||||
<n-flex
|
||||
class="history-toolbar"
|
||||
align="center"
|
||||
justify="space-between"
|
||||
:wrap="false"
|
||||
>
|
||||
<n-text depth="3">共 {{ items.length }} 条历史对话</n-text>
|
||||
<n-tooltip>
|
||||
<template #trigger>
|
||||
<n-button
|
||||
quaternary
|
||||
circle
|
||||
size="small"
|
||||
:loading="loading"
|
||||
aria-label="刷新历史对话"
|
||||
@click="load(true)"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon icon="lucide:refresh-cw" />
|
||||
</template>
|
||||
</n-button>
|
||||
</template>
|
||||
刷新历史对话
|
||||
</n-tooltip>
|
||||
</n-flex>
|
||||
|
||||
<n-spin v-if="loading" class="state" />
|
||||
<n-empty
|
||||
v-else-if="!items.length"
|
||||
class="state"
|
||||
description="暂无历史对话"
|
||||
/>
|
||||
<n-scrollbar v-else class="history-scrollbar">
|
||||
<n-flex vertical :size="12" class="history-list">
|
||||
<n-card
|
||||
v-for="(item, index) in items"
|
||||
:key="item.assistant_message_id"
|
||||
class="history-card"
|
||||
:class="{
|
||||
'is-selected':
|
||||
selectedAssistantMessageId === item.assistant_message_id,
|
||||
}"
|
||||
size="small"
|
||||
:bordered="true"
|
||||
hoverable
|
||||
:embedded="selectedAssistantMessageId === item.assistant_message_id"
|
||||
:content-style="{ padding: 0 }"
|
||||
@click="selectItem(item)"
|
||||
>
|
||||
<n-flex
|
||||
class="history-main"
|
||||
align="center"
|
||||
justify="space-between"
|
||||
:wrap="false"
|
||||
>
|
||||
<n-flex align="center" :wrap="false" :size="6">
|
||||
<n-tag
|
||||
round
|
||||
size="small"
|
||||
:bordered="false"
|
||||
:type="
|
||||
selectedAssistantMessageId === item.assistant_message_id
|
||||
? 'success'
|
||||
: 'default'
|
||||
"
|
||||
>
|
||||
#{{ index + 1 }}
|
||||
</n-tag>
|
||||
<n-tag
|
||||
size="small"
|
||||
:type="item.source === 'manual' ? 'info' : 'success'"
|
||||
>
|
||||
{{ item.source === "manual" ? "手动提交" : "AI 对话" }}
|
||||
</n-tag>
|
||||
</n-flex>
|
||||
<n-flex align="center" :wrap="false" :size="4">
|
||||
<n-tag
|
||||
v-if="selectedAssistantMessageId === item.assistant_message_id"
|
||||
size="small"
|
||||
type="success"
|
||||
:bordered="false"
|
||||
>
|
||||
正在预览
|
||||
</n-tag>
|
||||
<n-text depth="3">
|
||||
{{ parseTime(item.created, "YYYY-MM-DD HH:mm") }}
|
||||
</n-text>
|
||||
<n-tooltip placement="top">
|
||||
<template #trigger>
|
||||
<n-button
|
||||
quaternary
|
||||
circle
|
||||
size="small"
|
||||
:loading="deletingId === item.assistant_message_id"
|
||||
:disabled="deletingId !== null"
|
||||
@click="deleteItem(item, $event)"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon icon="lucide:trash-2" />
|
||||
</template>
|
||||
</n-button>
|
||||
</template>
|
||||
删除这条历史对话
|
||||
</n-tooltip>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
<div
|
||||
class="prompt-markdown markdown-body"
|
||||
v-html="renderMarkdown(item.prompt)"
|
||||
/>
|
||||
<div class="thumbnail" aria-label="页面缩略图">
|
||||
<iframe
|
||||
v-if="item.hasPage"
|
||||
title="页面缩略图"
|
||||
loading="lazy"
|
||||
sandbox="allow-scripts"
|
||||
referrerpolicy="no-referrer"
|
||||
tabindex="-1"
|
||||
:srcdoc="item.previewDoc"
|
||||
/>
|
||||
<n-empty v-else size="small" description="未生成页面" />
|
||||
</div>
|
||||
</n-card>
|
||||
</n-flex>
|
||||
</n-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from "vue"
|
||||
import { Icon } from "@iconify/vue"
|
||||
import { useMessage } from "naive-ui"
|
||||
import { renderMarkdown } from "../../utils/markdown"
|
||||
import { Prompt } from "../../api"
|
||||
import type { PromptHistoryItem } from "../../utils/type"
|
||||
import { parseTime } from "../../utils/helper"
|
||||
import { buildPreviewDocument } from "../../utils/previewDocument"
|
||||
|
||||
const props = defineProps<{
|
||||
taskId: number
|
||||
active: boolean
|
||||
assetBaseUrl?: string
|
||||
refreshKey?: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
select: [code: { html: string; css: string; js: string }]
|
||||
deleted: [assistantMessageId: number]
|
||||
}>()
|
||||
|
||||
type HistoryViewItem = PromptHistoryItem & {
|
||||
hasPage: boolean
|
||||
previewDoc: string
|
||||
}
|
||||
|
||||
const items = ref<HistoryViewItem[]>([])
|
||||
const loading = ref(false)
|
||||
const selectedAssistantMessageId = ref<number | null>(null)
|
||||
const deletingId = ref<number | null>(null)
|
||||
let loadedTaskId = 0
|
||||
let pendingRefresh = false
|
||||
|
||||
const naiveMessage = useMessage()
|
||||
|
||||
function toViewItem(item: PromptHistoryItem): HistoryViewItem {
|
||||
const html = item.code_html ?? ""
|
||||
const css = item.code_css ?? ""
|
||||
const js = item.code_js ?? ""
|
||||
return {
|
||||
...item,
|
||||
hasPage: !!(html.trim() || css.trim() || js.trim()),
|
||||
previewDoc: buildPreviewDocument({
|
||||
html,
|
||||
css,
|
||||
js,
|
||||
assetBaseUrl: props.assetBaseUrl,
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteItem(item: HistoryViewItem, e: Event) {
|
||||
e.stopPropagation()
|
||||
if (deletingId.value !== null) return
|
||||
deletingId.value = item.assistant_message_id
|
||||
try {
|
||||
await Prompt.deleteMessagePair(item.assistant_message_id)
|
||||
items.value = items.value.filter(
|
||||
(i) => i.assistant_message_id !== item.assistant_message_id,
|
||||
)
|
||||
if (selectedAssistantMessageId.value === item.assistant_message_id) {
|
||||
selectedAssistantMessageId.value = null
|
||||
}
|
||||
emit("deleted", item.assistant_message_id)
|
||||
naiveMessage.success("已删除")
|
||||
} catch (error: any) {
|
||||
naiveMessage.error(error.response?.data?.detail ?? "删除失败,请重试")
|
||||
} finally {
|
||||
deletingId.value = null
|
||||
}
|
||||
}
|
||||
|
||||
function selectItem(item: HistoryViewItem) {
|
||||
selectedAssistantMessageId.value = item.assistant_message_id
|
||||
emit("select", {
|
||||
html: item.code_html ?? "",
|
||||
css: item.code_css ?? "",
|
||||
js: item.code_js ?? "",
|
||||
})
|
||||
}
|
||||
|
||||
async function load(force = true) {
|
||||
if (!props.taskId || loading.value) return
|
||||
if (!force && loadedTaskId === props.taskId) return
|
||||
loading.value = true
|
||||
try {
|
||||
const taskChanged = loadedTaskId !== props.taskId
|
||||
const data = await Prompt.listHistory(props.taskId)
|
||||
items.value = data.map(toViewItem)
|
||||
if (
|
||||
taskChanged ||
|
||||
!items.value.some(
|
||||
(item) =>
|
||||
item.assistant_message_id === selectedAssistantMessageId.value,
|
||||
)
|
||||
) {
|
||||
selectedAssistantMessageId.value = null
|
||||
}
|
||||
loadedTaskId = props.taskId
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [props.active, props.taskId] as const,
|
||||
([active]) => {
|
||||
if (active) {
|
||||
if (pendingRefresh) {
|
||||
pendingRefresh = false
|
||||
load(true)
|
||||
} else {
|
||||
load(false)
|
||||
}
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.refreshKey,
|
||||
() => {
|
||||
if (props.active) load(true)
|
||||
else pendingRefresh = true
|
||||
},
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
if (props.active) load(false)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.history-panel {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.history-toolbar {
|
||||
height: 42px;
|
||||
padding: 0 12px;
|
||||
border-bottom: 1px solid var(--n-border-color, #efeff5);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.state {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.history-scrollbar {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.history-card {
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.history-card.is-selected {
|
||||
--n-color: #f7fffa;
|
||||
box-shadow: 0 10px 24px rgba(24, 160, 88, 0.14);
|
||||
}
|
||||
|
||||
.history-card.is-selected .history-main {
|
||||
background: #eefaf3;
|
||||
}
|
||||
|
||||
.history-main {
|
||||
padding: 10px 12px;
|
||||
transition: background-color 0.18s ease;
|
||||
}
|
||||
|
||||
.prompt-markdown {
|
||||
margin: 0;
|
||||
padding: 0 12px 12px;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
word-break: break-word;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.prompt-markdown :deep(p),
|
||||
.prompt-markdown :deep(ul),
|
||||
.prompt-markdown :deep(ol),
|
||||
.prompt-markdown :deep(blockquote),
|
||||
.prompt-markdown :deep(pre) {
|
||||
margin-top: 0;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.prompt-markdown :deep(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.prompt-markdown :deep(pre) {
|
||||
padding: 8px;
|
||||
overflow-x: auto;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.prompt-markdown :deep(code) {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
height: 160px;
|
||||
border-top: 1px solid var(--n-border-color, #efeff5);
|
||||
background: #f7f7f9;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.history-card.is-selected .thumbnail {
|
||||
border-top-color: #d8f1e2;
|
||||
background: #f4fbf6;
|
||||
}
|
||||
|
||||
.thumbnail iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
background: #fff;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,402 @@
|
||||
<template>
|
||||
<div class="prompt-panel">
|
||||
<div class="messages" ref="messagesRef">
|
||||
<div
|
||||
v-for="(pair, pi) in pairs"
|
||||
:key="pair.assistantMsg?.id ?? 'user-' + pair.index"
|
||||
class="message-pair"
|
||||
:class="{ 'has-delete': pair.assistantMsg?.id && !streaming }"
|
||||
>
|
||||
<!-- Delete button: only shown on hover when pair has assistant id and not streaming -->
|
||||
<button
|
||||
v-if="pair.assistantMsg?.id && !streaming"
|
||||
class="pair-delete-btn"
|
||||
@click="deletePair(pair.assistantMsg!.id!)"
|
||||
title="删除这轮对话及关联提交"
|
||||
>
|
||||
<Icon icon="lucide:trash-2" :width="14" />
|
||||
</button>
|
||||
|
||||
<!-- User message -->
|
||||
<div class="message user">
|
||||
<div class="message-role">我</div>
|
||||
<div
|
||||
class="message-content"
|
||||
v-html="renderContent(pair.userMsg)"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- Assistant message -->
|
||||
<div v-if="pair.assistantMsg" class="message assistant">
|
||||
<div class="message-role">AI</div>
|
||||
<div
|
||||
class="message-content"
|
||||
v-html="renderContent(pair.assistantMsg)"
|
||||
></div>
|
||||
<div
|
||||
v-if="allowSubmit && hasCode(pair.assistantMsg)"
|
||||
class="message-actions"
|
||||
>
|
||||
<n-button
|
||||
size="tiny"
|
||||
:disabled="pair.assistantMsg.submitted"
|
||||
:loading="submittingId === pair.assistantMsg.id"
|
||||
@click="submitVersion(pair.assistantMsg)"
|
||||
>
|
||||
{{ pair.assistantMsg.submitted ? "已提交" : "提交此版本" }}
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Streaming indicator -->
|
||||
<div v-if="streaming" class="message assistant">
|
||||
<div class="message-role">AI</div>
|
||||
<div v-if="!streamingContent" class="typing-indicator">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="message-content"
|
||||
v-html="renderMarkdown(streamingContent)"
|
||||
></div>
|
||||
<div class="streaming-hint">AI 正在生成中…</div>
|
||||
</div>
|
||||
</div>
|
||||
<GuidancePanel @generate="onGuidanceGenerate" />
|
||||
<div class="input-area">
|
||||
<n-flex
|
||||
class="prompt-input-row"
|
||||
align="flex-start"
|
||||
:wrap="false"
|
||||
:size="8"
|
||||
>
|
||||
<n-input
|
||||
v-model:value="input"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 1, maxRows: 4 }"
|
||||
placeholder="描述你想要的网页效果..."
|
||||
:disabled="streaming"
|
||||
style="flex: 1; min-width: 0"
|
||||
@keydown.enter.exact.prevent="send"
|
||||
/>
|
||||
<n-button
|
||||
secondary
|
||||
:disabled="!input.trim() || !connected || !currentTaskId || streaming"
|
||||
style="flex-shrink: 0"
|
||||
title="调教提示词"
|
||||
aria-label="调教提示词"
|
||||
@click="startGuidance"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon icon="lucide:lightbulb" :width="16" />
|
||||
</template>
|
||||
</n-button>
|
||||
</n-flex>
|
||||
<n-flex justify="flex-end" align="center" style="margin-top: 8px">
|
||||
<n-select
|
||||
v-model:value="selectedModel"
|
||||
:options="modelOptions"
|
||||
style="width: 150px"
|
||||
:disabled="streaming"
|
||||
/>
|
||||
<n-button v-if="streaming" type="error" @click="stopPrompt">
|
||||
停止
|
||||
</n-button>
|
||||
<n-button
|
||||
v-else
|
||||
type="primary"
|
||||
:disabled="!input.trim() || !connected"
|
||||
@click="send"
|
||||
>
|
||||
发送
|
||||
</n-button>
|
||||
</n-flex>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, nextTick, computed } from "vue"
|
||||
import { useStorage } from "@vueuse/core"
|
||||
import { useMessage } from "naive-ui"
|
||||
import { Icon } from "@iconify/vue"
|
||||
import GuidancePanel from "./GuidancePanel.vue"
|
||||
import { openGuidance } from "../../store/guidance"
|
||||
import {
|
||||
messages,
|
||||
streaming,
|
||||
streamingContent,
|
||||
connected,
|
||||
sendPrompt,
|
||||
stopPrompt,
|
||||
currentTaskId,
|
||||
removeMessagePair,
|
||||
markMessageSubmitted,
|
||||
} from "../../store/prompt"
|
||||
import { Prompt, Submission } from "../../api"
|
||||
import { renderMarkdown } from "../../utils/markdown"
|
||||
|
||||
const { allowSubmit = true } = defineProps<{ allowSubmit?: boolean }>()
|
||||
|
||||
const emit = defineEmits<{ deleted: []; submitted: [] }>()
|
||||
|
||||
const input = ref("")
|
||||
const messagesRef = ref<HTMLElement>()
|
||||
const naiveMessage = useMessage()
|
||||
|
||||
const modelOptions = [
|
||||
{ label: "豆包", value: "doubao-seed-2-0-lite-260215" },
|
||||
{ label: "DeepSeek", value: "deepseek-v4-flash" },
|
||||
{ label: "DeepSeek(思考)", value: "deepseek-v4-flash-thinking" },
|
||||
]
|
||||
const selectedModel = useStorage("prompt-model", "deepseek-v4-flash")
|
||||
|
||||
// Group messages into user+assistant pairs
|
||||
const submittingId = ref<number | null>(null)
|
||||
|
||||
const pairs = computed(() => {
|
||||
const result: Array<{
|
||||
userMsg: { role: string; content: string; id?: number }
|
||||
assistantMsg: {
|
||||
role: string
|
||||
content: string
|
||||
id?: number
|
||||
code?: any
|
||||
submitted?: boolean
|
||||
} | null
|
||||
index: number
|
||||
}> = []
|
||||
const msgs = messages.value
|
||||
let i = 0
|
||||
while (i < msgs.length) {
|
||||
if (msgs[i].role === "user") {
|
||||
const assistantMsg =
|
||||
msgs[i + 1]?.role === "assistant" ? msgs[i + 1] : null
|
||||
result.push({ userMsg: msgs[i], assistantMsg, index: i })
|
||||
i += assistantMsg ? 2 : 1
|
||||
} else {
|
||||
i++
|
||||
}
|
||||
}
|
||||
return result
|
||||
})
|
||||
|
||||
function hasCode(msg: { code?: any } | null): boolean {
|
||||
if (!msg?.code) return false
|
||||
return !!(msg.code.html || msg.code.css || msg.code.js)
|
||||
}
|
||||
|
||||
async function submitVersion(msg: {
|
||||
id?: number
|
||||
code?: { html: string | null; css: string | null; js: string | null }
|
||||
}) {
|
||||
if (!msg.id || !msg.code || !currentTaskId.value) return
|
||||
submittingId.value = msg.id
|
||||
try {
|
||||
await Submission.create(
|
||||
currentTaskId.value,
|
||||
{
|
||||
html: msg.code.html ?? "",
|
||||
css: msg.code.css ?? "",
|
||||
js: msg.code.js ?? "",
|
||||
},
|
||||
msg.id,
|
||||
)
|
||||
markMessageSubmitted(msg.id)
|
||||
naiveMessage.success("提交成功")
|
||||
emit("submitted")
|
||||
} catch {
|
||||
naiveMessage.error("提交失败,请重试")
|
||||
} finally {
|
||||
submittingId.value = null
|
||||
}
|
||||
}
|
||||
|
||||
async function deletePair(assistantMsgId: number) {
|
||||
try {
|
||||
await Prompt.deleteMessagePair(assistantMsgId)
|
||||
removeMessagePair(assistantMsgId)
|
||||
naiveMessage.success("已删除")
|
||||
emit("deleted")
|
||||
} catch (error: any) {
|
||||
naiveMessage.error(error.response?.data?.detail ?? "删除失败,请重试")
|
||||
}
|
||||
}
|
||||
|
||||
function send() {
|
||||
const text = input.value.trim()
|
||||
if (!text || streaming.value) return
|
||||
sendPrompt(text, selectedModel.value)
|
||||
input.value = ""
|
||||
}
|
||||
|
||||
function startGuidance() {
|
||||
const text = input.value.trim()
|
||||
if (!text || !currentTaskId.value) return
|
||||
openGuidance(currentTaskId.value, text)
|
||||
}
|
||||
|
||||
function onGuidanceGenerate(finalPrompt: string) {
|
||||
sendPrompt(finalPrompt, selectedModel.value)
|
||||
input.value = ""
|
||||
}
|
||||
|
||||
function renderContent(msg: { role: string; content: string }): string {
|
||||
return renderMarkdown(msg.content)
|
||||
}
|
||||
|
||||
watch([() => messages.value.length, streamingContent], () => {
|
||||
nextTick(() => {
|
||||
if (messagesRef.value) {
|
||||
messagesRef.value.scrollTop = messagesRef.value.scrollHeight
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.prompt-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.messages {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.message-role {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 4px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.message.user .message-role {
|
||||
color: #2080f0;
|
||||
}
|
||||
|
||||
.message.assistant .message-role {
|
||||
color: #18a058;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.message-content :deep(pre) {
|
||||
background: #f5f5f5;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.message-actions {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.typing-indicator {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.typing-indicator span {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #18a058;
|
||||
animation: bounce 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.typing-indicator span:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.typing-indicator span:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%,
|
||||
60%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 0.4;
|
||||
}
|
||||
30% {
|
||||
transform: translateY(-6px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.streaming-hint {
|
||||
font-size: 11px;
|
||||
color: #aaa;
|
||||
margin-top: 4px;
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.input-area {
|
||||
flex-shrink: 0;
|
||||
padding: 12px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.message-pair {
|
||||
position: relative;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.message-pair .message {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.pair-delete-btn {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: none;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
padding: 3px 6px;
|
||||
cursor: pointer;
|
||||
color: #bbb;
|
||||
line-height: 1;
|
||||
transition:
|
||||
color 0.15s,
|
||||
border-color 0.15s;
|
||||
}
|
||||
|
||||
.pair-delete-btn:hover {
|
||||
color: #e03e3e;
|
||||
border-color: #e03e3e;
|
||||
}
|
||||
|
||||
.message-pair.has-delete:hover .pair-delete-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<n-modal
|
||||
preset="card"
|
||||
:show="show"
|
||||
title="等待 AI 回复时,给同学的作品打个分吧"
|
||||
style="width: 90vw; max-width: 960px"
|
||||
@update:show="onUpdateShow"
|
||||
>
|
||||
<n-text
|
||||
v-if="current"
|
||||
depth="3"
|
||||
style="font-size: 12px; display: block; margin-bottom: 8px"
|
||||
>
|
||||
{{ current.task_title }} · 提交者 {{ current.username }}
|
||||
</n-text>
|
||||
<div class="preview-wrapper">
|
||||
<iframe class="preview-iframe" :srcdoc="previewContent"></iframe>
|
||||
</div>
|
||||
<div class="rate-row">
|
||||
<n-rate
|
||||
v-if="current"
|
||||
:key="current.submission_id"
|
||||
:size="32"
|
||||
@update:value="onRate"
|
||||
/>
|
||||
</div>
|
||||
<n-text
|
||||
depth="3"
|
||||
style="font-size: 11px; display: block; text-align: center; margin-top: 8px"
|
||||
>
|
||||
打分后自动换下一个作品;AI 回复完成后弹窗会自动关闭
|
||||
</n-text>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onUnmounted } from "vue"
|
||||
import { useMessage } from "naive-ui"
|
||||
import { Submission } from "../../api"
|
||||
import { streaming } from "../../store/prompt"
|
||||
import { buildPreviewDocument } from "../../utils/previewDocument"
|
||||
import type { RandomRatingItem } from "../../utils/type"
|
||||
|
||||
const message = useMessage()
|
||||
|
||||
const show = ref(false)
|
||||
const current = ref<RandomRatingItem | null>(null)
|
||||
const previewContent = ref("")
|
||||
let reshowTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
function clearReshowTimer() {
|
||||
if (reshowTimer !== null) {
|
||||
clearTimeout(reshowTimer)
|
||||
reshowTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchAndShow() {
|
||||
try {
|
||||
const item = await Submission.randomForRating(current.value?.submission_id)
|
||||
if (item) {
|
||||
current.value = item
|
||||
previewContent.value = buildPreviewDocument({
|
||||
html: item.html ?? "",
|
||||
css: item.css ?? "",
|
||||
js: item.js ?? "",
|
||||
})
|
||||
show.value = true
|
||||
} else {
|
||||
show.value = false
|
||||
}
|
||||
} catch (err: any) {
|
||||
message.error(err.response?.data?.detail ?? "获取作品失败,请重试")
|
||||
}
|
||||
}
|
||||
|
||||
async function onRate(score: number) {
|
||||
if (!current.value) return
|
||||
try {
|
||||
await Submission.updateScore(current.value.submission_id, score)
|
||||
message.success("感谢评分!")
|
||||
await fetchAndShow()
|
||||
} catch (err: any) {
|
||||
message.error(err.response?.data?.detail ?? "打分失败,请重试")
|
||||
}
|
||||
}
|
||||
|
||||
function onUpdateShow(value: boolean) {
|
||||
show.value = value
|
||||
if (!value) {
|
||||
clearReshowTimer()
|
||||
if (streaming.value) {
|
||||
reshowTimer = setTimeout(fetchAndShow, 30_000)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
streaming,
|
||||
(val) => {
|
||||
clearReshowTimer()
|
||||
if (val) {
|
||||
fetchAndShow()
|
||||
} else {
|
||||
show.value = false
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
onUnmounted(() => {
|
||||
clearReshowTimer()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.preview-wrapper {
|
||||
height: 70vh;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.rate-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<MdEditor v-bind="props" v-model="modelValue" @upload-img="uploadImg" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { MdEditor } from "md-editor-v3"
|
||||
//@ts-ignore
|
||||
import "md-editor-v3/lib/style.css"
|
||||
import { Helper } from "../../api"
|
||||
import { useMessage } from "naive-ui"
|
||||
|
||||
const message = useMessage()
|
||||
|
||||
const modelValue = defineModel<string>()
|
||||
|
||||
const props = defineProps()
|
||||
|
||||
const uploadImg = async (files: File[], callback: (urls: string[]) => void) => {
|
||||
try {
|
||||
const res = await Promise.all(
|
||||
files.map(async (file) => {
|
||||
const path = await Helper.upload(file)
|
||||
if (!path) {
|
||||
message.error("图片上传失败")
|
||||
return ""
|
||||
}
|
||||
return path
|
||||
}),
|
||||
)
|
||||
callback(res.filter((url) => url !== ""))
|
||||
} catch (err) {
|
||||
message.error("图片上传失败")
|
||||
callback([])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<n-flex>
|
||||
<n-button secondary v-if="user.role !== Role.Super" @click="edit">
|
||||
修改
|
||||
</n-button>
|
||||
<n-button
|
||||
secondary
|
||||
type="error"
|
||||
v-if="user.role !== Role.Super && user.is_active"
|
||||
@click="toggleUserActive"
|
||||
>
|
||||
封号
|
||||
</n-button>
|
||||
<n-button
|
||||
secondary
|
||||
type="primary"
|
||||
v-if="user.role !== Role.Super && !user.is_active"
|
||||
@click="toggleUserActive"
|
||||
>
|
||||
解封
|
||||
</n-button>
|
||||
</n-flex>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useMessage } from "naive-ui"
|
||||
import { Account } from "../../api"
|
||||
import { ADMIN_URL } from "../../utils/const"
|
||||
import { Role, type User } from "../../utils/type"
|
||||
|
||||
interface Props {
|
||||
user: User
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emits = defineEmits(["reload"])
|
||||
|
||||
const message = useMessage()
|
||||
|
||||
function edit() {
|
||||
window.open(`${ADMIN_URL}/account/user/${props.user.id}/change/`)
|
||||
}
|
||||
|
||||
async function toggleUserActive() {
|
||||
const data = await Account.toggleActive(props.user.id)
|
||||
message.success(data.message)
|
||||
emits("reload")
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,63 @@
|
||||
<script lang="ts" setup>
|
||||
import { EditorView } from "@codemirror/view"
|
||||
import { Codemirror } from "vue-codemirror"
|
||||
import { css } from "@codemirror/lang-css"
|
||||
import { javascript } from "@codemirror/lang-javascript"
|
||||
import { html } from "@codemirror/lang-html"
|
||||
import { computed } from "vue"
|
||||
|
||||
const styleTheme = EditorView.baseTheme({
|
||||
"& .cm-scroller": {
|
||||
"font-family": "Monaco",
|
||||
},
|
||||
"&.cm-editor.cm-focused": {
|
||||
outline: "none",
|
||||
},
|
||||
"&.cm-editor .cm-tooltip.cm-tooltip-autocomplete ul": {
|
||||
"font-family": "Monaco",
|
||||
},
|
||||
})
|
||||
|
||||
const bgColors: Record<string, string> = {
|
||||
html: "#fff6f3",
|
||||
css: "#f3f6ff",
|
||||
js: "#fffdf0",
|
||||
}
|
||||
|
||||
interface Props {
|
||||
language?: "html" | "css" | "js"
|
||||
fontSize?: number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
language: "html",
|
||||
fontSize: 20,
|
||||
})
|
||||
|
||||
const code = defineModel<string>("value")
|
||||
|
||||
const lang = computed(() => {
|
||||
if (props.language === "html") return html()
|
||||
if (props.language === "css") return css()
|
||||
return javascript()
|
||||
})
|
||||
|
||||
const bgTheme = computed(() => {
|
||||
const bg = bgColors[props.language] ?? "#ffffff"
|
||||
return EditorView.theme({
|
||||
"&": { backgroundColor: bg },
|
||||
".cm-gutters": { backgroundColor: bg },
|
||||
})
|
||||
})
|
||||
|
||||
const extensions = computed(() => [styleTheme, bgTheme.value, lang.value])
|
||||
</script>
|
||||
<template>
|
||||
<Codemirror
|
||||
v-model="code"
|
||||
indentWithTab
|
||||
:extensions="extensions"
|
||||
:tabSize="4"
|
||||
:style="{ height: '100%', fontSize: props.fontSize + 'px' }"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<div class="editors-root">
|
||||
<n-tabs
|
||||
:value="tab"
|
||||
:class="`tab-active-${tab}`"
|
||||
pane-class="pane"
|
||||
style="height: 100%"
|
||||
type="card"
|
||||
@update:value="changeTab"
|
||||
>
|
||||
<n-tab-pane name="html" tab="HTML">
|
||||
<template #tab>
|
||||
<n-flex align="center">
|
||||
<Icon :width="20" icon="skill-icons:html"></Icon>
|
||||
<span>HTML</span>
|
||||
</n-flex>
|
||||
</template>
|
||||
<Editor v-model:value="html" :font-size="size" language="html" />
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="css" tab="CSS">
|
||||
<template #tab>
|
||||
<n-flex align="center">
|
||||
<Icon :width="20" icon="skill-icons:css"></Icon>
|
||||
<span>CSS</span>
|
||||
</n-flex>
|
||||
</template>
|
||||
<Editor v-model:value="css" :font-size="size" language="css" />
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="js" tab="JS">
|
||||
<template #tab>
|
||||
<n-flex align="center">
|
||||
<Icon :width="20" icon="skill-icons:javascript"></Icon>
|
||||
<span>JS</span>
|
||||
</n-flex>
|
||||
</template>
|
||||
<Editor v-model:value="js" :font-size="size" language="js" />
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="actions" tab="选项">
|
||||
<template #tab>
|
||||
<n-flex align="center">
|
||||
<Icon :width="20" icon="skill-icons:actix-dark"></Icon>
|
||||
<span>选项</span>
|
||||
</n-flex>
|
||||
</template>
|
||||
<n-flex class="wrapper" vertical>
|
||||
<n-flex align="center">
|
||||
<span class="label">重置</span>
|
||||
<n-button @click="reset('html')">HTML</n-button>
|
||||
<n-button @click="reset('css')">CSS</n-button>
|
||||
<n-button @click="reset('js')">JS</n-button>
|
||||
</n-flex>
|
||||
<n-flex align="center">
|
||||
<span class="label">字号</span>
|
||||
<n-flex align="center">
|
||||
<span :style="{ 'font-size': size + 'px' }">{{ size }}</span>
|
||||
<n-button :disabled="size === 20" @click="changeSize(size - 2)">
|
||||
调小
|
||||
</n-button>
|
||||
<n-button :disabled="size === 40" @click="changeSize(size + 2)">
|
||||
调大
|
||||
</n-button>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
<n-flex align="center">
|
||||
<span class="label">预加载</span>
|
||||
<n-tag type="success">Normalize.css</n-tag>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
</n-tab-pane>
|
||||
<template #suffix>
|
||||
<Toolbar
|
||||
:submit-loading="submitLoading"
|
||||
@format="format"
|
||||
@submit="formatAndSubmit"
|
||||
/>
|
||||
</template>
|
||||
</n-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Icon } from "@iconify/vue"
|
||||
import prettier from "prettier/standalone"
|
||||
import * as htmlParser from "prettier/parser-html"
|
||||
import * as cssParser from "prettier/parser-postcss"
|
||||
import * as babelParser from "prettier/parser-babel"
|
||||
import * as estreeParser from "prettier/plugins/estree"
|
||||
import Editor from "./Editor.vue"
|
||||
import Toolbar from "./Toolbar.vue"
|
||||
import { html, css, js, tab, size, reset } from "../../store/editors"
|
||||
import { taskId } from "../../store/task"
|
||||
import { Submission } from "../../api"
|
||||
import { NCode, useDialog, useMessage } from "naive-ui"
|
||||
import { h, ref } from "vue"
|
||||
|
||||
const dialog = useDialog()
|
||||
const message = useMessage()
|
||||
const submitLoading = ref(false)
|
||||
|
||||
function changeTab(name: string) {
|
||||
tab.value = name
|
||||
}
|
||||
|
||||
function changeSize(num: number) {
|
||||
size.value = num
|
||||
}
|
||||
|
||||
async function formatCode() {
|
||||
const [htmlFormatted, cssFormatted, jsFormatted] = await Promise.all([
|
||||
prettier.format(html.value, {
|
||||
parser: "html",
|
||||
//@ts-ignore
|
||||
plugins: [htmlParser, babelParser, estreeParser, cssParser],
|
||||
tabWidth: 4,
|
||||
}),
|
||||
prettier.format(css.value, {
|
||||
parser: "css",
|
||||
plugins: [cssParser],
|
||||
tabWidth: 4,
|
||||
}),
|
||||
prettier.format(js.value, {
|
||||
parser: "babel",
|
||||
//@ts-ignore
|
||||
plugins: [babelParser, estreeParser],
|
||||
tabWidth: 2,
|
||||
}),
|
||||
])
|
||||
html.value = htmlFormatted
|
||||
css.value = cssFormatted
|
||||
js.value = jsFormatted
|
||||
}
|
||||
|
||||
async function format() {
|
||||
try {
|
||||
await formatCode()
|
||||
} catch (err: any) {
|
||||
dialog.error({
|
||||
title: "格式化失败",
|
||||
content: () => h(NCode, { code: err.message }),
|
||||
style: { width: "auto" },
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async function doSubmit() {
|
||||
try {
|
||||
await Submission.create(taskId.value, {
|
||||
html: html.value,
|
||||
css: css.value,
|
||||
js: js.value,
|
||||
})
|
||||
message.success("提交成功")
|
||||
} catch (err) {
|
||||
message.error("提交失败")
|
||||
}
|
||||
}
|
||||
|
||||
async function formatAndSubmit() {
|
||||
submitLoading.value = true
|
||||
try {
|
||||
await formatCode()
|
||||
await doSubmit()
|
||||
} catch (err: any) {
|
||||
dialog.warning({
|
||||
title: "代码整理失败",
|
||||
content: () => h(NCode, { code: err.message }),
|
||||
positiveText: "忽略并提交",
|
||||
negativeText: "取消",
|
||||
style: { width: "auto" },
|
||||
onPositiveClick: async () => {
|
||||
await doSubmit()
|
||||
},
|
||||
})
|
||||
} finally {
|
||||
submitLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.pane {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
:deep(.n-tabs-nav .n-tabs-tab[data-name="html"]) {
|
||||
background-color: #fff6f3 !important;
|
||||
}
|
||||
:deep(.n-tabs-nav .n-tabs-tab[data-name="css"]) {
|
||||
background-color: #f3f6ff !important;
|
||||
}
|
||||
:deep(.n-tabs-nav .n-tabs-tab[data-name="js"]) {
|
||||
background-color: #fffdf0 !important;
|
||||
}
|
||||
|
||||
.editors-root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.tab-active-html .n-tab-pane) {
|
||||
background-color: #fff6f3;
|
||||
}
|
||||
:deep(.tab-active-css .n-tab-pane) {
|
||||
background-color: #f3f6ff;
|
||||
}
|
||||
:deep(.tab-active-js .n-tab-pane) {
|
||||
background-color: #fffdf0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<n-flex align="center" justify="space-between" class="title">
|
||||
<div>
|
||||
<n-text class="titleText">预览</n-text>
|
||||
<n-text v-if="!!submission.id" depth="3">
|
||||
({{ submission.view_count || 0 }})
|
||||
</n-text>
|
||||
</div>
|
||||
<n-flex>
|
||||
<n-tooltip>
|
||||
<template #trigger>
|
||||
<n-button quaternary @click="cycleLayout">
|
||||
<template #icon>
|
||||
<Icon :icon="layoutIcon" />
|
||||
</template>
|
||||
</n-button>
|
||||
</template>
|
||||
{{ layoutLabel }}
|
||||
</n-tooltip>
|
||||
<n-button quaternary @click="download" :disabled="!showDL">下载</n-button>
|
||||
<n-button quaternary @click="open">全屏</n-button>
|
||||
<n-button quaternary v-if="props.clearable" @click="clear">清空</n-button>
|
||||
<n-button
|
||||
quaternary
|
||||
v-if="props.showCodeButton"
|
||||
@click="emits('showCode')"
|
||||
>
|
||||
代码
|
||||
</n-button>
|
||||
<n-button quaternary v-if="props.submissionId" @click="copyLink">
|
||||
链接
|
||||
</n-button>
|
||||
<n-flex v-if="!!submission.id" align="center">
|
||||
<n-button quaternary @click="emits('showCode')">代码</n-button>
|
||||
<n-popover v-if="submission.my_score === 0">
|
||||
<template #trigger>
|
||||
<n-button secondary type="primary">打分</n-button>
|
||||
</template>
|
||||
<n-rate :size="30" @update:value="updateScore" />
|
||||
</n-popover>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
<div class="iframe-wrapper" :style="iframeWrapperStyle">
|
||||
<iframe class="iframe" :srcdoc="previewContent"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { watchDebounced } from "@vueuse/core"
|
||||
import { computed, onMounted, ref } from "vue"
|
||||
import { useRouter } from "vue-router"
|
||||
import { Submission } from "../../api"
|
||||
import { submission } from "../../store/submission"
|
||||
import { useMessage } from "naive-ui"
|
||||
import { Icon } from "@iconify/vue"
|
||||
import copy from "copy-text-to-clipboard"
|
||||
import { buildPreviewDocument } from "../../utils/previewDocument"
|
||||
|
||||
interface Props {
|
||||
html: string
|
||||
css: string
|
||||
js: string
|
||||
assetBaseUrl?: string
|
||||
submissionId?: string
|
||||
showCodeButton?: boolean
|
||||
clearable?: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emits = defineEmits(["afterScore", "showCode", "clear"])
|
||||
|
||||
type Layout = "desktop" | "mobile" | "tablet"
|
||||
const layouts: Layout[] = ["desktop", "mobile", "tablet"]
|
||||
const layoutConfig: Record<
|
||||
Layout,
|
||||
{ icon: string; label: string; width: string }
|
||||
> = {
|
||||
desktop: {
|
||||
icon: "material-symbols:desktop-windows-outline",
|
||||
label: "桌面",
|
||||
width: "100%",
|
||||
},
|
||||
mobile: {
|
||||
icon: "material-symbols:smartphone-outline",
|
||||
label: "移动端 (375px)",
|
||||
width: "375px",
|
||||
},
|
||||
tablet: {
|
||||
icon: "material-symbols:tablet-outline",
|
||||
label: "平板 (768px)",
|
||||
width: "768px",
|
||||
},
|
||||
}
|
||||
const layoutIndex = ref(0)
|
||||
const layoutIcon = computed(
|
||||
() => layoutConfig[layouts[layoutIndex.value]!].icon,
|
||||
)
|
||||
const layoutLabel = computed(
|
||||
() => layoutConfig[layouts[layoutIndex.value]!].label,
|
||||
)
|
||||
const iframeWrapperStyle = computed(() => ({
|
||||
maxWidth: layoutConfig[layouts[layoutIndex.value]!].width,
|
||||
}))
|
||||
function cycleLayout() {
|
||||
layoutIndex.value = (layoutIndex.value + 1) % layouts.length
|
||||
}
|
||||
|
||||
const message = useMessage()
|
||||
const router = useRouter()
|
||||
|
||||
const showDL = computed(() => props.html || props.css || props.js)
|
||||
const previewContent = ref("")
|
||||
|
||||
function getContent() {
|
||||
return buildPreviewDocument({
|
||||
html: props.html,
|
||||
css: props.css,
|
||||
js: props.js,
|
||||
assetBaseUrl: props.assetBaseUrl,
|
||||
})
|
||||
}
|
||||
|
||||
function preview() {
|
||||
previewContent.value = getContent()
|
||||
}
|
||||
|
||||
function download() {
|
||||
const content = getContent()
|
||||
const blob = new Blob([content], { type: "text/html" })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement("a")
|
||||
a.href = url
|
||||
a.download = "index.html"
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
function open() {
|
||||
if (props.submissionId) {
|
||||
const data = router.resolve({
|
||||
name: "submission",
|
||||
params: { id: props.submissionId },
|
||||
})
|
||||
window.open(data.href, "_blank")
|
||||
} else {
|
||||
const newTab = window.open("about:blank", "_blank")
|
||||
if (!newTab) return
|
||||
newTab.document.open()
|
||||
newTab.document.write(getContent())
|
||||
newTab.document.close()
|
||||
}
|
||||
}
|
||||
|
||||
function clear() {
|
||||
emits("clear")
|
||||
}
|
||||
|
||||
function copyLink() {
|
||||
copy(`${document.location.origin}/submission/${props.submissionId}`)
|
||||
message.success("该提交的链接已复制")
|
||||
}
|
||||
|
||||
async function updateScore(score: number) {
|
||||
try {
|
||||
const res = await Submission.updateScore(submission.value.id, score)
|
||||
message.success(res.message)
|
||||
submission.value.my_score = score
|
||||
emits("afterScore")
|
||||
} catch (err: any) {
|
||||
message.error(err.response.data.detail)
|
||||
}
|
||||
}
|
||||
|
||||
watchDebounced(
|
||||
() => [props.html, props.css, props.js, props.assetBaseUrl],
|
||||
preview,
|
||||
{
|
||||
debounce: 500,
|
||||
maxWait: 1000,
|
||||
},
|
||||
)
|
||||
onMounted(preview)
|
||||
</script>
|
||||
<style scoped>
|
||||
.title {
|
||||
height: 43px;
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid rgb(239, 239, 245);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.titleText {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.iframe-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
transition: max-width 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<n-flex align="center" class="corner">
|
||||
<n-button quaternary v-if="!show" @click="showTutorial"> 教程 </n-button>
|
||||
<template v-if="user.loaded && authed">
|
||||
<n-button quaternary @click="emit('format')">整理</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
secondary
|
||||
:disabled="submitDisabled"
|
||||
:loading="submitLoading"
|
||||
@click="emit('submit')"
|
||||
>
|
||||
提交
|
||||
</n-button>
|
||||
<n-dropdown :options="menu" @select="clickMenu">
|
||||
<n-button>{{ user.username }}</n-button>
|
||||
</n-dropdown>
|
||||
</template>
|
||||
<n-button
|
||||
v-if="user.loaded && !authed"
|
||||
@click="handleLogin"
|
||||
secondary
|
||||
type="primary"
|
||||
>
|
||||
登录
|
||||
</n-button>
|
||||
</n-flex>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed, h } from "vue"
|
||||
import { Icon } from "@iconify/vue"
|
||||
import {
|
||||
authed,
|
||||
roleAdmin,
|
||||
roleNormal,
|
||||
roleSuper,
|
||||
user,
|
||||
} from "../../store/user"
|
||||
import { loginModal } from "../../store/modal"
|
||||
import { show, panelSize } from "../../store/panel"
|
||||
import { taskId } from "../../store/task"
|
||||
import { Account } from "../../api"
|
||||
import { Role } from "../../utils/type"
|
||||
import { router } from "../../router"
|
||||
import { ADMIN_URL } from "../../utils/const"
|
||||
|
||||
const props = defineProps<{
|
||||
submitLoading: boolean
|
||||
}>()
|
||||
const emit = defineEmits(["format", "submit"])
|
||||
|
||||
const submitDisabled = computed(() => {
|
||||
return taskId.value === 0
|
||||
})
|
||||
|
||||
const menu = computed(() => [
|
||||
{
|
||||
label: "后台管理",
|
||||
key: "dashboard",
|
||||
show: !roleNormal.value,
|
||||
icon: () =>
|
||||
h(Icon, {
|
||||
icon: "streamline-emojis:robot-face-1",
|
||||
width: 20,
|
||||
}),
|
||||
},
|
||||
{
|
||||
label: "数据管理",
|
||||
key: "admin",
|
||||
show: roleSuper.value,
|
||||
icon: () =>
|
||||
h(Icon, {
|
||||
icon: "skill-icons:django",
|
||||
width: 20,
|
||||
}),
|
||||
},
|
||||
{
|
||||
label: "我的提交",
|
||||
key: "submissions",
|
||||
icon: () =>
|
||||
h(Icon, {
|
||||
icon: "streamline-emojis:bar-chart",
|
||||
width: 20,
|
||||
}),
|
||||
},
|
||||
{
|
||||
label: "退出账号",
|
||||
key: "logout",
|
||||
icon: () =>
|
||||
h(Icon, {
|
||||
icon: "streamline-emojis:hot-beverage-2",
|
||||
width: 20,
|
||||
}),
|
||||
},
|
||||
])
|
||||
|
||||
function showTutorial() {
|
||||
show.value = true
|
||||
panelSize.value = 2 / 5
|
||||
}
|
||||
|
||||
function clickMenu(name: string) {
|
||||
switch (name) {
|
||||
case "dashboard": {
|
||||
const route = roleAdmin.value ? "challenge-editor" : "tutorial-editor"
|
||||
router.push({ name: route, params: { display: 0 } })
|
||||
break
|
||||
}
|
||||
case "admin":
|
||||
window.open(ADMIN_URL)
|
||||
break
|
||||
case "submissions":
|
||||
router.push({
|
||||
name: "submissions",
|
||||
params: { page: 1 },
|
||||
query: { username: user.username },
|
||||
})
|
||||
break
|
||||
case "logout":
|
||||
handleLogout()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function handleLogin() {
|
||||
loginModal.value = true
|
||||
}
|
||||
|
||||
async function handleLogout() {
|
||||
await Account.logout()
|
||||
user.username = ""
|
||||
user.role = Role.Normal
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.corner {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,395 @@
|
||||
<template>
|
||||
<n-modal
|
||||
:show="show"
|
||||
preset="card"
|
||||
style="width: 90vw; max-width: 1400px"
|
||||
@update:show="$emit('update:show', $event)"
|
||||
>
|
||||
<template #header>
|
||||
<n-flex justify="start" align="center">
|
||||
<span>提示词</span>
|
||||
<n-tooltip placement="bottom-start">
|
||||
<template #trigger>
|
||||
<Icon icon="lucide:info" :width="20" style="color: #aaa" />
|
||||
</template>
|
||||
<div style="line-height: 2">
|
||||
<div>
|
||||
<span :style="{ color: levelColors[1], fontWeight: 'bold' }">
|
||||
L1
|
||||
</span>
|
||||
— 记忆:复述或识别知识点
|
||||
</div>
|
||||
<div>
|
||||
<span :style="{ color: levelColors[2], fontWeight: 'bold' }">
|
||||
L2
|
||||
</span>
|
||||
— 理解:用自己的话解释概念
|
||||
</div>
|
||||
<div>
|
||||
<span :style="{ color: levelColors[3], fontWeight: 'bold' }">
|
||||
L3
|
||||
</span>
|
||||
— 应用:将知识用于新情境
|
||||
</div>
|
||||
<div>
|
||||
<span :style="{ color: levelColors[4], fontWeight: 'bold' }">
|
||||
L4
|
||||
</span>
|
||||
— 分析:拆解结构、找出规律
|
||||
</div>
|
||||
<div>
|
||||
<span :style="{ color: levelColors[5], fontWeight: 'bold' }">
|
||||
L5
|
||||
</span>
|
||||
— 评价:基于标准作出判断
|
||||
</div>
|
||||
<div>
|
||||
<span :style="{ color: levelColors[6], fontWeight: 'bold' }">
|
||||
L6
|
||||
</span>
|
||||
— 创造:整合信息产出新成果
|
||||
</div>
|
||||
</div>
|
||||
</n-tooltip>
|
||||
</n-flex>
|
||||
</template>
|
||||
<n-spin :show="loading">
|
||||
<n-empty
|
||||
v-if="!loading && rounds.length === 0"
|
||||
description="暂无对话记录"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
style="
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
height: 75vh;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(round, index) in rounds"
|
||||
:key="index"
|
||||
style="
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
cursor: pointer;
|
||||
"
|
||||
@click="selectedRound = index"
|
||||
>
|
||||
<div
|
||||
:style="{
|
||||
flexShrink: 0,
|
||||
width: '22px',
|
||||
height: '22px',
|
||||
borderRadius: '50%',
|
||||
background: selectedRound === index ? '#2080f0' : '#c2d5fb',
|
||||
color: '#fff',
|
||||
fontSize: '12px',
|
||||
fontWeight: 'bold',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginTop: '2px',
|
||||
transition: 'background 0.2s',
|
||||
}"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div
|
||||
:style="{
|
||||
flex: 1,
|
||||
padding: '10px 14px',
|
||||
borderRadius: '8px',
|
||||
background: selectedRound === index ? '#e8f0fe' : '#f5f5f5',
|
||||
border:
|
||||
selectedRound === index
|
||||
? '1px solid #2080f0'
|
||||
: '1px solid #e0e0e0',
|
||||
fontSize: '13px',
|
||||
lineHeight: '1.6',
|
||||
transition: 'all 0.2s',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="prompt-markdown markdown-body"
|
||||
:class="{
|
||||
'is-collapsed':
|
||||
isPromptLong(round.question) && !isExpanded(index),
|
||||
}"
|
||||
v-html="renderMarkdown(round.question)"
|
||||
></div>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
"
|
||||
>
|
||||
<span
|
||||
v-if="round.source"
|
||||
:style="{
|
||||
fontSize: '10px',
|
||||
padding: '1px 5px',
|
||||
borderRadius: '4px',
|
||||
background:
|
||||
round.source === 'conversation' ? '#e8f0fe' : '#f0f0f0',
|
||||
color:
|
||||
round.source === 'conversation' ? '#2060c0' : '#888',
|
||||
fontWeight: 500,
|
||||
whiteSpace: 'nowrap',
|
||||
}"
|
||||
>{{
|
||||
round.source === "conversation" ? "对话" : "手动"
|
||||
}}</span
|
||||
>
|
||||
<span
|
||||
v-if="round.prompt_level"
|
||||
:style="{
|
||||
fontSize: '11px',
|
||||
fontWeight: 'bold',
|
||||
color: levelColors[round.prompt_level],
|
||||
}"
|
||||
>L{{ round.prompt_level }}</span
|
||||
>
|
||||
<n-button
|
||||
v-if="isPromptLong(round.question)"
|
||||
text
|
||||
size="tiny"
|
||||
type="primary"
|
||||
@click.stop="toggleExpanded(index)"
|
||||
>
|
||||
<Icon
|
||||
:icon="
|
||||
isExpanded(index)
|
||||
? 'lucide:chevron-up'
|
||||
: 'lucide:chevron-down'
|
||||
"
|
||||
:width="12"
|
||||
/>
|
||||
{{ isExpanded(index) ? "收起" : "展开" }}
|
||||
</n-button>
|
||||
<n-popconfirm
|
||||
v-if="round.assistantMsgId && canDelete"
|
||||
:show-icon="false"
|
||||
@positive-click="deleteRound(index)"
|
||||
>
|
||||
<template #trigger>
|
||||
<n-button
|
||||
text
|
||||
size="tiny"
|
||||
type="error"
|
||||
style="margin-left: 2px"
|
||||
@click.stop
|
||||
>
|
||||
<Icon icon="lucide:trash-2" :width="12" />
|
||||
</n-button>
|
||||
</template>
|
||||
确定删除这一轮?
|
||||
</n-popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 8px">
|
||||
<div style="font-weight: bold; font-size: 13px; color: #555">
|
||||
第 {{ selectedRound + 1 }} 轮网页
|
||||
</div>
|
||||
<iframe
|
||||
v-if="selectedPageHtml"
|
||||
:srcdoc="selectedPageHtml"
|
||||
:key="selectedRound"
|
||||
sandbox="allow-scripts"
|
||||
style="
|
||||
flex: 1;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
"
|
||||
/>
|
||||
<n-empty v-else description="该轮无网页代码" style="margin: auto" />
|
||||
</div>
|
||||
</div>
|
||||
</n-spin>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from "vue"
|
||||
import { NPopconfirm, NButton, useMessage } from "naive-ui"
|
||||
import { Icon } from "@iconify/vue"
|
||||
import { marked } from "marked"
|
||||
import { Prompt, Submission } from "../../api"
|
||||
import type { PromptRound } from "../../utils/type"
|
||||
import { user, roleSuper } from "../../store/user"
|
||||
|
||||
const message = useMessage()
|
||||
|
||||
const props = defineProps<{
|
||||
show: boolean
|
||||
submissionId: string
|
||||
username?: string
|
||||
}>()
|
||||
|
||||
const canDelete = computed(
|
||||
() =>
|
||||
roleSuper.value || (!!props.username && props.username === user.username),
|
||||
)
|
||||
|
||||
defineEmits<{ "update:show": [value: boolean] }>()
|
||||
|
||||
const loading = ref(false)
|
||||
const selectedRound = ref(0)
|
||||
const expandedRounds = ref<Set<number>>(new Set())
|
||||
type ChainRound = Omit<PromptRound, "source"> & {
|
||||
source: string | null
|
||||
assistantMsgId: number | null
|
||||
}
|
||||
const rounds = ref<ChainRound[]>([])
|
||||
|
||||
async function deleteRound(index: number) {
|
||||
const round = rounds.value[index]
|
||||
if (!round.assistantMsgId) return
|
||||
try {
|
||||
await Prompt.deleteMessagePair(round.assistantMsgId)
|
||||
} catch (error: any) {
|
||||
message.error(error.response?.data?.detail ?? "删除失败,请重试")
|
||||
return
|
||||
}
|
||||
await loadMessages()
|
||||
if (selectedRound.value >= rounds.value.length) {
|
||||
selectedRound.value = Math.max(0, rounds.value.length - 1)
|
||||
}
|
||||
}
|
||||
|
||||
const levelColors: Record<number, string> = {
|
||||
1: "#aaa",
|
||||
2: "#6aab9c",
|
||||
3: "#4a9ade",
|
||||
4: "#c47ab8",
|
||||
5: "#e0a040",
|
||||
6: "#e05c5c",
|
||||
}
|
||||
|
||||
const selectedPageHtml = computed(() => {
|
||||
const round = rounds.value[selectedRound.value]
|
||||
if (!round?.html) return null
|
||||
const style = round.css ? `<style>${round.css}</style>` : ""
|
||||
const script = round.js ? `<script>${round.js}<\/script>` : ""
|
||||
return `<!DOCTYPE html><html><head><meta charset="utf-8">${style}</head><body>${round.html}${script}</body></html>`
|
||||
})
|
||||
|
||||
function renderMarkdown(text: string): string {
|
||||
return marked.parse(text) as string
|
||||
}
|
||||
|
||||
function isPromptLong(text: string): boolean {
|
||||
return text.length > 220 || text.split(/\r?\n/).length > 4
|
||||
}
|
||||
|
||||
function isExpanded(index: number): boolean {
|
||||
return expandedRounds.value.has(index)
|
||||
}
|
||||
|
||||
function toggleExpanded(index: number) {
|
||||
const next = new Set(expandedRounds.value)
|
||||
if (next.has(index)) {
|
||||
next.delete(index)
|
||||
} else {
|
||||
next.add(index)
|
||||
}
|
||||
expandedRounds.value = next
|
||||
}
|
||||
|
||||
async function loadMessages() {
|
||||
if (!props.submissionId) return
|
||||
loading.value = true
|
||||
rounds.value = []
|
||||
selectedRound.value = 0
|
||||
expandedRounds.value = new Set()
|
||||
try {
|
||||
const data = await Submission.getPromptChain(props.submissionId)
|
||||
rounds.value = data.map((round) => ({
|
||||
...round,
|
||||
source: round.source ?? null,
|
||||
assistantMsgId: round.assistant_msg_id ?? null,
|
||||
}))
|
||||
const last = rounds.value.length - 1
|
||||
if (last >= 0) selectedRound.value = last
|
||||
} catch {
|
||||
rounds.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [props.show, props.submissionId] as const,
|
||||
([visible]) => {
|
||||
if (visible) loadMessages()
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.prompt-markdown {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.prompt-markdown.is-collapsed {
|
||||
position: relative;
|
||||
max-height: 126px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.prompt-markdown :deep(p),
|
||||
.prompt-markdown :deep(ul),
|
||||
.prompt-markdown :deep(ol),
|
||||
.prompt-markdown :deep(blockquote),
|
||||
.prompt-markdown :deep(pre) {
|
||||
margin-top: 0;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.prompt-markdown :deep(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.prompt-markdown :deep(pre) {
|
||||
padding: 8px;
|
||||
overflow-x: auto;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.prompt-markdown :deep(code) {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<n-modal
|
||||
preset="card"
|
||||
:show="show"
|
||||
style="max-width: 60%"
|
||||
@update:show="$emit('update:show', $event)"
|
||||
>
|
||||
<template #header>
|
||||
<n-flex align="center">
|
||||
<span>前端代码</span>
|
||||
<n-button tertiary @click="$emit('copy-to-editor')"
|
||||
>复制到编辑框</n-button
|
||||
>
|
||||
</n-flex>
|
||||
</template>
|
||||
<n-tabs animated type="segment">
|
||||
<n-tab-pane name="html" tab="html">
|
||||
<n-code :code="html" language="html" word-wrap />
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="css" tab="css">
|
||||
<n-code :code="css" language="css" word-wrap />
|
||||
</n-tab-pane>
|
||||
<n-tab-pane v-if="!!js" name="js" tab="js">
|
||||
<n-code :code="js" language="js" word-wrap />
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
show: boolean
|
||||
html: string
|
||||
css: string
|
||||
js: string
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
"update:show": [value: boolean]
|
||||
"copy-to-editor": []
|
||||
}>()
|
||||
</script>
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<n-spin v-if="loading" size="small" style="padding: 12px" />
|
||||
<n-data-table
|
||||
v-else-if="items"
|
||||
:columns="subColumns"
|
||||
:data="items"
|
||||
size="small"
|
||||
striped
|
||||
:row-key="(r: SubmissionOut) => r.id"
|
||||
:row-props="rowProps"
|
||||
:row-class-name="rowClassName"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, h } from "vue"
|
||||
import {
|
||||
NButton,
|
||||
NDataTable,
|
||||
NPopconfirm,
|
||||
NSpin,
|
||||
type DataTableColumn,
|
||||
} from "naive-ui"
|
||||
import type { SubmissionOut } from "../../utils/type"
|
||||
import { TASK_TYPE } from "../../utils/const"
|
||||
import { parseTime } from "../../utils/helper"
|
||||
import { user, roleSuper } from "../../store/user"
|
||||
import { submission } from "../../store/submission"
|
||||
|
||||
const props = defineProps<{
|
||||
row: SubmissionOut
|
||||
items: SubmissionOut[] | undefined
|
||||
loading: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
select: [id: string]
|
||||
delete: [row: SubmissionOut, parentId: string]
|
||||
"show-chain": [submissionId: string, username: string]
|
||||
}>()
|
||||
|
||||
const isChallenge = computed(() => props.row.task_type === TASK_TYPE.Challenge)
|
||||
|
||||
function rowProps(r: SubmissionOut) {
|
||||
return {
|
||||
style: { cursor: "pointer" },
|
||||
onClick: () => emit("select", r.id),
|
||||
}
|
||||
}
|
||||
|
||||
function rowClassName(r: SubmissionOut) {
|
||||
return submission.value.id === r.id ? "row-active" : ""
|
||||
}
|
||||
|
||||
const subColumns = computed((): DataTableColumn<SubmissionOut>[] => [
|
||||
{
|
||||
title: "时间",
|
||||
key: "created",
|
||||
width: 160,
|
||||
render: (r) => parseTime(r.created, "YYYY-MM-DD HH:mm:ss"),
|
||||
},
|
||||
{
|
||||
title: "得分",
|
||||
key: "score",
|
||||
width: 80,
|
||||
render: (r) => {
|
||||
const myScore = r.my_score > 0 ? String(r.my_score) : "-"
|
||||
const avgScore = r.score > 0 ? r.score.toFixed(2) : "-"
|
||||
return h(
|
||||
"div",
|
||||
{ style: { display: "flex", gap: "6px", alignItems: "baseline" } },
|
||||
[
|
||||
h("span", avgScore),
|
||||
h("span", { style: { fontSize: "11px", color: "#999" } }, myScore),
|
||||
],
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "actions",
|
||||
width: isChallenge.value ? 110 : 60,
|
||||
render: (r: SubmissionOut) =>
|
||||
h("div", { style: { display: "flex", gap: "8px" } }, [
|
||||
...(isChallenge.value
|
||||
? [
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
text: true,
|
||||
type: "primary",
|
||||
onClick: (e: Event) => {
|
||||
e.stopPropagation()
|
||||
emit("show-chain", r.id, r.username)
|
||||
},
|
||||
},
|
||||
() => "查看",
|
||||
),
|
||||
]
|
||||
: []),
|
||||
...(r.username === user.username || roleSuper.value
|
||||
? [
|
||||
h(
|
||||
NPopconfirm,
|
||||
{ onPositiveClick: () => emit("delete", r, props.row.id) },
|
||||
{
|
||||
trigger: () =>
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
text: true,
|
||||
type: "error",
|
||||
size: "small",
|
||||
onClick: (e: Event) => e.stopPropagation(),
|
||||
},
|
||||
() => "删除",
|
||||
),
|
||||
default: () => "确定删除这次提交?",
|
||||
},
|
||||
),
|
||||
]
|
||||
: []),
|
||||
]),
|
||||
} as DataTableColumn<SubmissionOut>,
|
||||
])
|
||||
</script>
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<n-popover v-if="isAdmin" trigger="click">
|
||||
<template #trigger>
|
||||
<span :style="dotStyle" />
|
||||
</template>
|
||||
<n-space vertical size="small">
|
||||
<n-button
|
||||
v-for="opt in FLAG_OPTIONS"
|
||||
:key="opt.value"
|
||||
text
|
||||
@click="$emit('update:flag', opt.value)"
|
||||
>
|
||||
<span style="display: flex; align-items: center; gap: 6px">
|
||||
<span
|
||||
:style="{
|
||||
display: 'inline-block',
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: opt.color,
|
||||
}"
|
||||
/>
|
||||
{{ opt.label }}
|
||||
</span>
|
||||
</n-button>
|
||||
<n-button
|
||||
v-if="flag"
|
||||
text
|
||||
block
|
||||
type="error"
|
||||
@click="$emit('update:flag', null)"
|
||||
>
|
||||
清除
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-popover>
|
||||
<span v-else :style="dotStyle" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue"
|
||||
import type { FlagType } from "../../utils/type"
|
||||
|
||||
const FLAG_OPTIONS: {
|
||||
value: NonNullable<FlagType>
|
||||
color: string
|
||||
label: string
|
||||
}[] = [
|
||||
{ value: "red", color: "#e03030", label: "值得展示" },
|
||||
{ value: "blue", color: "#2080f0", label: "需要讲解" },
|
||||
{ value: "green", color: "#18a058", label: "优秀作品" },
|
||||
{ value: "yellow", color: "#f0a020", label: "需要改进" },
|
||||
]
|
||||
|
||||
const props = defineProps<{
|
||||
flag: FlagType
|
||||
isAdmin: boolean
|
||||
}>()
|
||||
|
||||
defineEmits<{ "update:flag": [value: FlagType] }>()
|
||||
|
||||
const dotStyle = computed(() => {
|
||||
const match = FLAG_OPTIONS.find((f) => f.value === props.flag)
|
||||
return {
|
||||
display: "inline-block",
|
||||
width: "12px",
|
||||
height: "12px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: match ? match.color : "transparent",
|
||||
border: match ? "none" : "1px dashed #ccc",
|
||||
cursor: props.isAdmin ? "pointer" : "default",
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<n-flex>
|
||||
<n-tag
|
||||
size="small"
|
||||
:bordered="false"
|
||||
type="primary"
|
||||
v-if="props.submission.task_type === 'tutorial'"
|
||||
>
|
||||
教程
|
||||
</n-tag>
|
||||
<n-tag
|
||||
:bordered="false"
|
||||
size="small"
|
||||
type="error"
|
||||
v-if="props.submission.task_type === 'challenge'"
|
||||
>
|
||||
挑战
|
||||
</n-tag>
|
||||
<n-button text @click="open">{{ props.submission.task_title }}</n-button>
|
||||
</n-flex>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from "vue-router"
|
||||
import type { SubmissionOut } from "../../utils/type"
|
||||
import { goHome } from "../../utils/helper"
|
||||
|
||||
interface Props {
|
||||
submission: SubmissionOut
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const router = useRouter()
|
||||
function open() {
|
||||
goHome(router, props.submission.task_type, props.submission.task_display)
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div class="container" v-if="taskTab === TASK_TYPE.Challenge">
|
||||
<n-empty v-if="!challenges.length">暂无挑战,敬请期待</n-empty>
|
||||
<n-flex v-else vertical :size="12">
|
||||
<n-card
|
||||
v-for="item in challenges"
|
||||
:key="item.display"
|
||||
hoverable
|
||||
:class="['challenge-card', { submitted: item.submitted }]"
|
||||
@click="select(item)"
|
||||
>
|
||||
<template #header>
|
||||
<n-flex align="center" :size="6">
|
||||
<span v-if="item.submitted" class="check-icon">✓</span>
|
||||
<span :class="{ 'submitted-title': item.submitted }">{{
|
||||
item.title
|
||||
}}</span>
|
||||
</n-flex>
|
||||
</template>
|
||||
<template #header-extra>
|
||||
<n-flex :size="6">
|
||||
<n-tag type="warning" size="small">{{ item.score }} 分</n-tag>
|
||||
<n-tag v-if="item.pass_score != null" size="small"
|
||||
>及格 {{ item.pass_score }} 分</n-tag
|
||||
>
|
||||
</n-flex>
|
||||
</template>
|
||||
<n-text depth="3" class="challenge-author">
|
||||
出题人:{{ item.author_name || "未设置" }}
|
||||
</n-text>
|
||||
</n-card>
|
||||
</n-flex>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue"
|
||||
import { useRouter } from "vue-router"
|
||||
import { Challenge } from "../../api"
|
||||
import { taskTab } from "../../store/task"
|
||||
import { TASK_TYPE } from "../../utils/const"
|
||||
import type { ChallengeSlim } from "../../utils/type"
|
||||
|
||||
const router = useRouter()
|
||||
const challenges = ref<ChallengeSlim[]>([])
|
||||
|
||||
function select(item: ChallengeSlim) {
|
||||
router.push({ name: "home-challenge", params: { display: item.display } })
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
challenges.value = await Challenge.listDisplay()
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.challenge-card {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.challenge-card.submitted {
|
||||
background-color: #f6ffed;
|
||||
border-color: #b7eb8f;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
color: #52c41a;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.submitted-title {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.challenge-author {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<n-flex vertical>
|
||||
<n-button size="small" @click="showUpload = true">图片素材</n-button>
|
||||
<n-flex v-if="assets.length" wrap>
|
||||
<n-card
|
||||
v-for="asset in assets"
|
||||
:key="asset.name"
|
||||
size="small"
|
||||
style="width: 120px"
|
||||
>
|
||||
<template #cover>
|
||||
<n-image
|
||||
:src="asset.url"
|
||||
style="width: 100%; height: 100px; object-fit: contain"
|
||||
/>
|
||||
</template>
|
||||
<n-flex align="center" justify="space-between">
|
||||
<n-text style="font-size: 12px; word-break: break-all">
|
||||
{{ asset.name }}
|
||||
</n-text>
|
||||
<n-button
|
||||
size="tiny"
|
||||
quaternary
|
||||
type="error"
|
||||
@click="remove(asset.name)"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon icon="material-symbols:close-rounded" />
|
||||
</template>
|
||||
</n-button>
|
||||
</n-flex>
|
||||
</n-card>
|
||||
</n-flex>
|
||||
|
||||
<n-modal
|
||||
v-model:show="showUpload"
|
||||
preset="card"
|
||||
title="上传素材"
|
||||
style="width: 400px"
|
||||
>
|
||||
<n-form>
|
||||
<n-form-item label="文件名(如 1.png)">
|
||||
<n-input v-model:value="uploadName" placeholder="1.png" />
|
||||
</n-form-item>
|
||||
<n-form-item label="选择文件">
|
||||
<n-upload :max="1" @change="onFileChange" :default-upload="false">
|
||||
<n-button>选择文件</n-button>
|
||||
</n-upload>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
<template #footer>
|
||||
<n-flex justify="end">
|
||||
<n-button @click="showUpload = false">取消</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
:disabled="!uploadName || !uploadFile"
|
||||
:loading="uploading"
|
||||
@click="upload"
|
||||
>
|
||||
上传
|
||||
</n-button>
|
||||
</n-flex>
|
||||
</template>
|
||||
</n-modal>
|
||||
</n-flex>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from "vue"
|
||||
import { Icon } from "@iconify/vue"
|
||||
import { useMessage } from "naive-ui"
|
||||
import type { UploadFileInfo } from "naive-ui"
|
||||
import { TaskAssets } from "../../api"
|
||||
import type { TaskAsset } from "../../utils/type"
|
||||
|
||||
const props = defineProps<{
|
||||
taskType: "challenge" | "tutorial"
|
||||
display: number
|
||||
}>()
|
||||
|
||||
const message = useMessage()
|
||||
const assets = ref<TaskAsset[]>([])
|
||||
const showUpload = ref(false)
|
||||
const uploadName = ref("")
|
||||
const uploadFile = ref<File | null>(null)
|
||||
const uploading = ref(false)
|
||||
|
||||
async function load() {
|
||||
if (!props.display) return
|
||||
try {
|
||||
assets.value =
|
||||
props.taskType === "challenge"
|
||||
? await TaskAssets.listChallenge(props.display)
|
||||
: await TaskAssets.listTutorial(props.display)
|
||||
} catch {
|
||||
assets.value = []
|
||||
}
|
||||
}
|
||||
|
||||
function onFileChange({ file }: { file: UploadFileInfo }) {
|
||||
if (file.status === "pending") {
|
||||
uploadFile.value = file.file ?? null
|
||||
}
|
||||
}
|
||||
|
||||
async function upload() {
|
||||
if (!uploadName.value || !uploadFile.value) return
|
||||
uploading.value = true
|
||||
try {
|
||||
const asset =
|
||||
props.taskType === "challenge"
|
||||
? await TaskAssets.uploadChallenge(
|
||||
props.display,
|
||||
uploadName.value,
|
||||
uploadFile.value,
|
||||
)
|
||||
: await TaskAssets.uploadTutorial(
|
||||
props.display,
|
||||
uploadName.value,
|
||||
uploadFile.value,
|
||||
)
|
||||
const idx = assets.value.findIndex((a) => a.name === asset.name)
|
||||
if (idx >= 0) assets.value[idx] = asset
|
||||
else assets.value.push(asset)
|
||||
message.success(`${asset.name} 上传成功`)
|
||||
showUpload.value = false
|
||||
uploadName.value = ""
|
||||
uploadFile.value = null
|
||||
} catch (err: any) {
|
||||
message.error(err?.response?.data?.detail ?? "上传失败")
|
||||
} finally {
|
||||
uploading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(name: string) {
|
||||
try {
|
||||
props.taskType === "challenge"
|
||||
? await TaskAssets.deleteChallenge(props.display, name)
|
||||
: await TaskAssets.deleteTutorial(props.display, name)
|
||||
assets.value = assets.value.filter((a) => a.name !== name)
|
||||
message.success("删除成功")
|
||||
} catch (err: any) {
|
||||
message.error(err?.response?.data?.detail ?? "删除失败")
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => props.display, load, { immediate: true })
|
||||
</script>
|
||||
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<n-flex align="center" justify="space-between" class="title">
|
||||
<n-flex align="center">
|
||||
<Icon
|
||||
:icon="
|
||||
taskTab === TASK_TYPE.Tutorial
|
||||
? 'twemoji:books'
|
||||
: 'twemoji:crossed-swords'
|
||||
"
|
||||
:width="20"
|
||||
></Icon>
|
||||
<n-tabs
|
||||
style="width: 150px"
|
||||
type="segment"
|
||||
animated
|
||||
:value="taskTab"
|
||||
@update:value="changeTab"
|
||||
>
|
||||
<n-tab name="tutorial" tab="教程"></n-tab>
|
||||
<n-tab name="challenge" tab="挑战"></n-tab>
|
||||
</n-tabs>
|
||||
<template v-if="!hideNav">
|
||||
<n-button text @click="prev()" :disabled="prevDisabled()">
|
||||
<Icon :width="24" icon="pepicons-pencil:arrow-left"></Icon>
|
||||
</n-button>
|
||||
<span v-if="progressText" class="progress-text">
|
||||
{{ progressText }}
|
||||
</span>
|
||||
<n-button text @click="next()" :disabled="nextDisabled()">
|
||||
<Icon :width="24" icon="pepicons-pencil:arrow-right"></Icon>
|
||||
</n-button>
|
||||
</template>
|
||||
</n-flex>
|
||||
<n-flex>
|
||||
<n-tooltip
|
||||
v-if="tutorialAssets.length && taskTab === TASK_TYPE.Tutorial"
|
||||
trigger="hover"
|
||||
>
|
||||
<template #trigger>
|
||||
<n-button text @click="showAssets = true">
|
||||
<Icon :width="16" icon="lucide:image"></Icon>
|
||||
</n-button>
|
||||
</template>
|
||||
素材
|
||||
</n-tooltip>
|
||||
<n-tooltip v-if="authed" trigger="hover">
|
||||
<template #trigger>
|
||||
<n-button
|
||||
text
|
||||
@click="
|
||||
$router.push({ name: 'submissions', params: { page: 1 } })
|
||||
"
|
||||
>
|
||||
<Icon :width="16" icon="lucide:list"></Icon>
|
||||
</n-button>
|
||||
</template>
|
||||
提交记录
|
||||
</n-tooltip>
|
||||
<n-tooltip v-if="authed" trigger="hover">
|
||||
<template #trigger>
|
||||
<n-button text @click="$router.push({ name: 'creation-list' })">
|
||||
<Icon :width="16" icon="lucide:sparkles"></Icon>
|
||||
</n-button>
|
||||
</template>
|
||||
自由创作
|
||||
</n-tooltip>
|
||||
<n-tooltip v-if="authed" trigger="hover">
|
||||
<template #trigger>
|
||||
<n-button text @click="$router.push({ name: 'showcase' })">
|
||||
<Icon :width="16" icon="lucide:award"></Icon>
|
||||
</n-button>
|
||||
</template>
|
||||
创意工坊
|
||||
</n-tooltip>
|
||||
<n-tooltip v-if="roleSuper" trigger="hover">
|
||||
<template #trigger>
|
||||
<n-button text @click="edit">
|
||||
<Icon :width="16" icon="lucide:edit"></Icon>
|
||||
</n-button>
|
||||
</template>
|
||||
编辑
|
||||
</n-tooltip>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-button text @click="$emit('hide')">
|
||||
<Icon :width="24" icon="material-symbols:close-rounded"></Icon>
|
||||
</n-button>
|
||||
</template>
|
||||
关闭
|
||||
</n-tooltip>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
<TutorialContent v-if="taskTab === TASK_TYPE.Tutorial" />
|
||||
<ChallengeList v-else />
|
||||
</div>
|
||||
<n-modal
|
||||
v-model:show="showAssets"
|
||||
preset="card"
|
||||
title="图片素材"
|
||||
style="width: 570px"
|
||||
>
|
||||
<n-flex wrap>
|
||||
<n-card
|
||||
v-for="asset in tutorialAssets"
|
||||
:key="asset.name"
|
||||
:title="asset.name"
|
||||
size="small"
|
||||
style="width: 120px"
|
||||
>
|
||||
<template #cover>
|
||||
<n-image
|
||||
:src="asset.url"
|
||||
style="width: 100%; height: 100px; object-fit: contain"
|
||||
/>
|
||||
</template>
|
||||
</n-card>
|
||||
</n-flex>
|
||||
</n-modal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Icon } from "@iconify/vue"
|
||||
import { computed, ref, watch } from "vue"
|
||||
import {
|
||||
step,
|
||||
tutorialIds,
|
||||
prev,
|
||||
next,
|
||||
prevDisabled,
|
||||
nextDisabled,
|
||||
} from "../../store/tutorial"
|
||||
import { authed, roleSuper } from "../../store/user"
|
||||
import { taskTab, taskId, challengeDisplay } from "../../store/task"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
import { TASK_TYPE } from "../../utils/const"
|
||||
import { TaskAssets } from "../../api"
|
||||
import type { TaskAsset } from "../../utils/type"
|
||||
import ChallengeList from "./ChallengeList.vue"
|
||||
import TutorialContent from "./TutorialContent.vue"
|
||||
|
||||
const tutorialAssets = ref<TaskAsset[]>([])
|
||||
const showAssets = ref(false)
|
||||
|
||||
async function loadTutorialAssets(display: number) {
|
||||
if (!display) {
|
||||
tutorialAssets.value = []
|
||||
return
|
||||
}
|
||||
try {
|
||||
tutorialAssets.value = await TaskAssets.listTutorial(display)
|
||||
} catch {
|
||||
tutorialAssets.value = []
|
||||
}
|
||||
}
|
||||
|
||||
watch(step, loadTutorialAssets, { immediate: true })
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
// 路由同步:初始执行 + watch 响应 SPA 内部导航
|
||||
function syncRoute(routeName: string) {
|
||||
if (routeName.startsWith("home-tutorial")) {
|
||||
taskTab.value = TASK_TYPE.Tutorial
|
||||
if (route.params.display) step.value = Number(route.params.display)
|
||||
} else if (routeName.startsWith("home-challenge")) {
|
||||
taskTab.value = TASK_TYPE.Challenge
|
||||
if (route.params.display)
|
||||
challengeDisplay.value = Number(route.params.display)
|
||||
}
|
||||
}
|
||||
syncRoute(route.name as string)
|
||||
watch(() => route.name as string, syncRoute)
|
||||
|
||||
defineEmits(["hide"])
|
||||
|
||||
const hideNav = computed(
|
||||
() => taskTab.value !== TASK_TYPE.Tutorial || tutorialIds.value.length <= 1,
|
||||
)
|
||||
|
||||
const progressText = computed(() => {
|
||||
const ids = tutorialIds.value
|
||||
if (!ids.length) return ""
|
||||
const i = ids.indexOf(step.value)
|
||||
return i === -1 ? "" : `${i + 1} / ${ids.length}`
|
||||
})
|
||||
|
||||
function changeTab(v: TASK_TYPE) {
|
||||
taskId.value = 0
|
||||
taskTab.value = v
|
||||
if (v === TASK_TYPE.Tutorial) {
|
||||
router.push(
|
||||
step.value
|
||||
? { name: "home-tutorial", params: { display: step.value } }
|
||||
: { name: "home-tutorial-list" },
|
||||
)
|
||||
} else if (v === TASK_TYPE.Challenge) {
|
||||
router.push({ name: "home-challenge-list" })
|
||||
}
|
||||
}
|
||||
|
||||
function edit() {
|
||||
const name =
|
||||
taskTab.value === TASK_TYPE.Tutorial
|
||||
? "tutorial-editor"
|
||||
: "challenge-editor"
|
||||
const display =
|
||||
taskTab.value === TASK_TYPE.Tutorial ? step.value : challengeDisplay.value
|
||||
router.push({ name, params: { display } })
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 43px;
|
||||
padding: 0 20px;
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid rgb(239, 239, 245);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
min-width: 36px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,549 @@
|
||||
<template>
|
||||
<n-modal
|
||||
:show="show"
|
||||
@update:show="$emit('update:show', $event)"
|
||||
preset="card"
|
||||
title="提交统计"
|
||||
style="max-width: 660px"
|
||||
:bordered="false"
|
||||
>
|
||||
<div style="max-height: 75vh; overflow-y: auto">
|
||||
<!-- 初始加载 -->
|
||||
<template v-if="!stats && loading">
|
||||
<n-flex justify="center" style="padding: 40px">
|
||||
<n-spin size="large" />
|
||||
</n-flex>
|
||||
</template>
|
||||
|
||||
<template v-else-if="stats">
|
||||
<!-- 班级筛选 -->
|
||||
<n-flex
|
||||
align="center"
|
||||
style="margin-bottom: 16px; flex-wrap: wrap; gap: 6px"
|
||||
>
|
||||
<span style="color: #666; font-size: 12px">班级筛选:</span>
|
||||
<n-button
|
||||
size="small"
|
||||
:type="selectedClass === null ? 'primary' : 'default'"
|
||||
@click="selectClass(null)"
|
||||
>全部</n-button
|
||||
>
|
||||
<n-button
|
||||
v-for="c in stats.classes"
|
||||
:key="c"
|
||||
size="small"
|
||||
:type="selectedClass === c ? 'primary' : 'default'"
|
||||
@click="selectClass(c)"
|
||||
>{{ c }}</n-button
|
||||
>
|
||||
</n-flex>
|
||||
|
||||
<n-spin :show="loading">
|
||||
<!-- 关键指标 -->
|
||||
<div
|
||||
style="
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 12px;
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(metric, i) in metrics"
|
||||
:key="metric.label"
|
||||
:style="{
|
||||
padding: '12px 8px',
|
||||
textAlign: 'center',
|
||||
borderRight: i < metrics.length - 1 ? '1px solid #eee' : 'none',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
:style="{
|
||||
fontSize: '20px',
|
||||
fontWeight: '700',
|
||||
color: metric.color,
|
||||
}"
|
||||
>
|
||||
{{ metric.value }}
|
||||
</div>
|
||||
<div style="color: #888; font-size: 11px; margin-top: 2px">
|
||||
{{ metric.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 未提交名单(可折叠) -->
|
||||
<div
|
||||
style="
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
padding: 10px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
background: #fff8f8;
|
||||
"
|
||||
@click="showUnsubmitted = !showUnsubmitted"
|
||||
>
|
||||
<n-flex align="center" :size="6">
|
||||
<span
|
||||
style="
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: #d03050;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
"
|
||||
></span>
|
||||
<span style="font-weight: 600; color: #d03050; font-size: 12px"
|
||||
>未提交({{ stats.unsubmitted_count }}人)</span
|
||||
>
|
||||
</n-flex>
|
||||
<Icon
|
||||
:icon="
|
||||
showUnsubmitted
|
||||
? 'lucide:chevron-down'
|
||||
: 'lucide:chevron-right'
|
||||
"
|
||||
:width="14"
|
||||
style="color: #aaa"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="showUnsubmitted"
|
||||
style="
|
||||
padding: 10px 14px;
|
||||
background: #fff8f8;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
"
|
||||
>
|
||||
<n-tag
|
||||
v-for="u in stats.unsubmitted_users"
|
||||
:key="u.username"
|
||||
size="small"
|
||||
:bordered="true"
|
||||
style="border-color: #ffd0d0; background: #fff"
|
||||
>{{ displayName(u.username, u.classname) }}</n-tag
|
||||
>
|
||||
<span
|
||||
v-if="!stats.unsubmitted_users.length"
|
||||
style="color: #aaa; font-size: 12px"
|
||||
>暂无</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 未打分名单(可折叠) -->
|
||||
<div
|
||||
style="
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
padding: 10px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
background: #fffaf5;
|
||||
"
|
||||
@click="showUnrated = !showUnrated"
|
||||
>
|
||||
<n-flex align="center" :size="6">
|
||||
<span
|
||||
style="
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: #e07800;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
"
|
||||
></span>
|
||||
<span style="font-weight: 600; color: #e07800; font-size: 12px"
|
||||
>未打分({{ stats.unrated_count }}人)</span
|
||||
>
|
||||
<span style="font-size: 11px; color: #aaa"
|
||||
>— 还没给任何提交打过分</span
|
||||
>
|
||||
</n-flex>
|
||||
<Icon
|
||||
:icon="
|
||||
showUnrated ? 'lucide:chevron-down' : 'lucide:chevron-right'
|
||||
"
|
||||
:width="14"
|
||||
style="color: #aaa"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="showUnrated"
|
||||
style="
|
||||
padding: 10px 14px;
|
||||
background: #fffaf5;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
"
|
||||
>
|
||||
<n-tag
|
||||
v-for="u in stats.unrated_users"
|
||||
:key="u.username"
|
||||
size="small"
|
||||
:bordered="true"
|
||||
style="border-color: #ffd0a0; background: #fff"
|
||||
>{{ displayName(u.username, u.classname) }}</n-tag
|
||||
>
|
||||
<span
|
||||
v-if="!stats.unrated_users.length"
|
||||
style="color: #aaa; font-size: 12px"
|
||||
>暂无</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 提交次数分布 -->
|
||||
<div style="margin-bottom: 12px">
|
||||
<div
|
||||
style="
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
"
|
||||
>
|
||||
提交次数分布
|
||||
<span style="font-size: 11px; color: #aaa; font-weight: 400"
|
||||
>(已提交的 {{ stats.submitted_count }} 人)</span
|
||||
>
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px">
|
||||
<div
|
||||
v-for="bucket in countBuckets"
|
||||
:key="bucket.label"
|
||||
:style="{
|
||||
flex: 1,
|
||||
border: `1px solid ${bucket.borderColor}`,
|
||||
borderRadius: '6px',
|
||||
padding: '10px 8px',
|
||||
textAlign: 'center',
|
||||
background: bucket.bg,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
:style="{
|
||||
fontSize: '20px',
|
||||
fontWeight: '700',
|
||||
color: bucket.color,
|
||||
}"
|
||||
>
|
||||
{{ bucket.value }}
|
||||
</div>
|
||||
<div style="color: #aaa; font-size: 11px; margin-top: 2px">
|
||||
{{ bucket.label }}
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 8px;
|
||||
background: #e8e8e8;
|
||||
border-radius: 3px;
|
||||
height: 4px;
|
||||
"
|
||||
>
|
||||
<div
|
||||
:style="{
|
||||
background: bucket.color,
|
||||
height: '4px',
|
||||
borderRadius: '3px',
|
||||
width: bucketPct(bucket.value),
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<div style="color: #bbb; font-size: 10px; margin-top: 3px">
|
||||
{{ bucketPct(bucket.value) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标记统计 -->
|
||||
<div>
|
||||
<div
|
||||
style="
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
"
|
||||
>
|
||||
标记统计
|
||||
</div>
|
||||
<n-flex :size="8" style="flex-wrap: wrap">
|
||||
<div
|
||||
v-for="flag in flagBadges"
|
||||
:key="flag.label"
|
||||
:style="{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
padding: '4px 10px',
|
||||
background: flag.bg,
|
||||
borderRadius: '4px',
|
||||
border: `1px solid ${flag.border}`,
|
||||
}"
|
||||
>
|
||||
<span
|
||||
:style="{
|
||||
width: '7px',
|
||||
height: '7px',
|
||||
background: flag.color,
|
||||
borderRadius: '50%',
|
||||
display: 'inline-block',
|
||||
}"
|
||||
></span>
|
||||
<span :style="{ color: flag.color, fontSize: '12px' }">{{
|
||||
flag.label
|
||||
}}</span>
|
||||
<span style="font-weight: 700; font-size: 13px; color: #333">{{
|
||||
flag.value
|
||||
}}</span>
|
||||
</div>
|
||||
</n-flex>
|
||||
</div>
|
||||
|
||||
<!-- 人气前五 -->
|
||||
<div style="margin-top: 12px">
|
||||
<div
|
||||
style="
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
"
|
||||
>
|
||||
人气前五
|
||||
</div>
|
||||
<div
|
||||
v-if="stats.top_viewed.length === 0"
|
||||
style="color: #aaa; font-size: 12px"
|
||||
>
|
||||
暂无
|
||||
</div>
|
||||
<div v-else style="display: flex; flex-direction: column; gap: 6px">
|
||||
<div
|
||||
v-for="(item, i) in stats.top_viewed"
|
||||
:key="item.submission_id"
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
background: #fafafa;
|
||||
"
|
||||
@click="viewSubmission(item.submission_id)"
|
||||
>
|
||||
<span
|
||||
:style="{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
borderRadius: '50%',
|
||||
background:
|
||||
i < 3 ? ['#f0a020', '#888', '#a07040'][i] : '#ddd',
|
||||
color: '#fff',
|
||||
fontSize: '11px',
|
||||
fontWeight: '700',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}"
|
||||
>{{ i + 1 }}</span
|
||||
>
|
||||
<span style="flex: 1; font-size: 13px; color: #333">
|
||||
{{ displayName(item.username, item.classname) }}
|
||||
</span>
|
||||
<span style="font-size: 12px; color: #2080f0; font-weight: 600">
|
||||
{{ item.view_count }} 次
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-spin>
|
||||
</template>
|
||||
</div>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, watch } from "vue"
|
||||
import { Icon } from "@iconify/vue"
|
||||
import { useRouter } from "vue-router"
|
||||
import { Submission } from "../../api"
|
||||
import type { TaskStatsOut } from "../../utils/type"
|
||||
|
||||
const props = defineProps<{ taskId: number; show: boolean }>()
|
||||
const emit = defineEmits<{ (e: "update:show", v: boolean): void }>()
|
||||
|
||||
const router = useRouter()
|
||||
const stats = ref<TaskStatsOut | null>(null)
|
||||
const loading = ref(false)
|
||||
const selectedClass = ref<string | null>(null)
|
||||
const showUnsubmitted = ref(false)
|
||||
const showUnrated = ref(false)
|
||||
|
||||
async function load(classname?: string) {
|
||||
loading.value = true
|
||||
try {
|
||||
stats.value = await Submission.getStats(props.taskId, classname)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function displayName(username: string, classname: string) {
|
||||
const prefix = "web" + classname
|
||||
return username.startsWith(prefix) ? username.slice(prefix.length) : username
|
||||
}
|
||||
|
||||
function selectClass(c: string | null) {
|
||||
selectedClass.value = c
|
||||
load(c ?? undefined)
|
||||
}
|
||||
|
||||
function viewSubmission(id: string) {
|
||||
const { href } = router.resolve({ name: "submission", params: { id } })
|
||||
window.open(href, "_blank")
|
||||
}
|
||||
|
||||
function bucketPct(value: number) {
|
||||
const total = stats.value?.submitted_count ?? 0
|
||||
if (!total) return "0%"
|
||||
return Math.round((value / total) * 100) + "%"
|
||||
}
|
||||
|
||||
const metrics = computed(() => {
|
||||
if (!stats.value) return []
|
||||
return [
|
||||
{ label: "已提交", value: stats.value.submitted_count, color: "#18a058" },
|
||||
{ label: "未提交", value: stats.value.unsubmitted_count, color: "#d03050" },
|
||||
{
|
||||
label: "平均分",
|
||||
value: stats.value.average_score?.toFixed(1) ?? "—",
|
||||
color: "#2080f0",
|
||||
},
|
||||
{ label: "未打分", value: stats.value.unrated_count, color: "#d03050" },
|
||||
]
|
||||
})
|
||||
|
||||
const countBuckets = computed(() => {
|
||||
if (!stats.value) return []
|
||||
const d = stats.value.submission_count_distribution
|
||||
return [
|
||||
{
|
||||
label: "4 次+",
|
||||
value: d.count_4_plus,
|
||||
color: "#f0a020",
|
||||
bg: "#fffbf0",
|
||||
borderColor: "#ffe0a0",
|
||||
},
|
||||
{
|
||||
label: "3 次",
|
||||
value: d.count_3,
|
||||
color: "#18a058",
|
||||
bg: "#f0fff4",
|
||||
borderColor: "#c8e8d0",
|
||||
},
|
||||
{
|
||||
label: "2 次",
|
||||
value: d.count_2,
|
||||
color: "#2080f0",
|
||||
bg: "#f0f7ff",
|
||||
borderColor: "#d0e8ff",
|
||||
},
|
||||
{
|
||||
label: "仅 1 次",
|
||||
value: d.count_1,
|
||||
color: "#888",
|
||||
bg: "#fafafa",
|
||||
borderColor: "#e0e0e0",
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
const scoreBars = computed(() => {
|
||||
if (!stats.value) return []
|
||||
const d = stats.value.score_distribution
|
||||
const vals = [d.range_1_2, d.range_2_3, d.range_3_4, d.range_4_5, d.range_5]
|
||||
const max = Math.max(...vals, 1)
|
||||
const colors = ["#d03050", "#f0a020", "#2080f0", "#18a058", "#18a058"]
|
||||
const labels = ["★", "★★", "★★★", "★★★★", "★★★★★"]
|
||||
return vals.map((v, i) => ({
|
||||
value: v,
|
||||
label: labels[i],
|
||||
color: colors[i],
|
||||
height: Math.max(Math.round((v / max) * 68), 3) + "px",
|
||||
}))
|
||||
})
|
||||
|
||||
const flagBadges = computed(() => {
|
||||
if (!stats.value) return []
|
||||
const f = stats.value.flag_stats
|
||||
return [
|
||||
{
|
||||
label: "值得展示",
|
||||
value: f.red,
|
||||
color: "#d03050",
|
||||
bg: "#fff0f0",
|
||||
border: "#ffd0d0",
|
||||
},
|
||||
{
|
||||
label: "需要讲解",
|
||||
value: f.blue,
|
||||
color: "#2080f0",
|
||||
bg: "#f0f7ff",
|
||||
border: "#c8deff",
|
||||
},
|
||||
{
|
||||
label: "优秀作品",
|
||||
value: f.green,
|
||||
color: "#18a058",
|
||||
bg: "#f0fff4",
|
||||
border: "#b8e8c8",
|
||||
},
|
||||
{
|
||||
label: "需要改进",
|
||||
value: f.yellow,
|
||||
color: "#f0a020",
|
||||
bg: "#fffbf0",
|
||||
border: "#ffe8a0",
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
// Load when modal opens
|
||||
watch(
|
||||
() => props.show,
|
||||
(val) => {
|
||||
if (val && props.taskId) {
|
||||
selectedClass.value = null
|
||||
load()
|
||||
}
|
||||
},
|
||||
)
|
||||
</script>
|
||||
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div class="markdown-body" v-html="content" ref="$content" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, useTemplateRef, watch } from "vue"
|
||||
import { marked } from "marked"
|
||||
import copyFn from "copy-text-to-clipboard"
|
||||
import { css, html, js, tab } from "../../store/editors"
|
||||
import { Tutorial } from "../../api"
|
||||
import { step, tutorialIds, loadTutorials } from "../../store/tutorial"
|
||||
import { taskId, assetBaseUrl } from "../../store/task"
|
||||
import { useRouter } from "vue-router"
|
||||
|
||||
marked.use({
|
||||
renderer: {
|
||||
code({ text, lang }) {
|
||||
const language = lang?.toLowerCase() ?? "html"
|
||||
return `<div class="codeblock-wrapper" data-lang="${language}">
|
||||
<div class="codeblock-action">
|
||||
<span class="lang">${language.toUpperCase()}</span>
|
||||
<div class="btn-group">
|
||||
<button class="action-btn" data-action="copy">复制</button>
|
||||
<button class="action-btn" data-action="replace">替换</button>
|
||||
</div>
|
||||
</div>
|
||||
<pre><code class="language-${language}">${text}</code></pre>
|
||||
</div>`
|
||||
},
|
||||
link({ href, text }) {
|
||||
return `<a href="${href}" target="_blank">${text}</a>`
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const content = ref("")
|
||||
const $content = useTemplateRef<any>("$content")
|
||||
|
||||
async function render() {
|
||||
const data = await Tutorial.get(step.value)
|
||||
taskId.value = data.task_ptr
|
||||
assetBaseUrl.value = `/media/tasks/tutorial/${step.value}/`
|
||||
html.value = data.example_html ?? ""
|
||||
css.value = data.example_css ?? ""
|
||||
js.value = data.example_js ?? ""
|
||||
const merged = `# ${data.display}. ${data.title}\n${data.content}`
|
||||
content.value = await marked.parse(merged, { async: true })
|
||||
}
|
||||
|
||||
function flash(btn: HTMLButtonElement, done: string, original: string) {
|
||||
btn.textContent = done
|
||||
setTimeout(() => {
|
||||
btn.textContent = original
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
function setupCodeActions() {
|
||||
$content.value?.addEventListener("click", (e: MouseEvent) => {
|
||||
const btn = (e.target as HTMLElement).closest<HTMLButtonElement>(
|
||||
"[data-action]",
|
||||
)
|
||||
if (!btn) return
|
||||
const wrapper = btn.closest<HTMLElement>("[data-lang]")!
|
||||
const lang = wrapper.dataset.lang ?? "html"
|
||||
const code = wrapper.querySelector("code")?.textContent ?? ""
|
||||
|
||||
if (btn.dataset.action === "copy") {
|
||||
copyFn(code)
|
||||
flash(btn, "已复制", "复制")
|
||||
} else if (btn.dataset.action === "replace") {
|
||||
tab.value = lang
|
||||
if (lang === "html") html.value = code
|
||||
if (lang === "css") css.value = code
|
||||
if (lang === "js") js.value = code
|
||||
flash(btn, "已替换", "替换")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function init() {
|
||||
await loadTutorials()
|
||||
if (!tutorialIds.value.length) {
|
||||
content.value = "暂无教程"
|
||||
return
|
||||
}
|
||||
render()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setupCodeActions()
|
||||
init()
|
||||
})
|
||||
watch(step, (v) => {
|
||||
router.push({ name: "home-tutorial", params: { display: v } })
|
||||
render()
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.markdown-body {
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.markdown-body pre {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.markdown-body pre code {
|
||||
padding: 0;
|
||||
font-size: 1rem;
|
||||
font-family: Monaco;
|
||||
}
|
||||
|
||||
.markdown-body .codeblock-wrapper {
|
||||
padding: 1rem;
|
||||
background-color: #f6f8fa;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.markdown-body .codeblock-wrapper pre {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
margin-bottom: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.codeblock-action {
|
||||
margin-bottom: 0.5rem;
|
||||
font-family:
|
||||
v-sans,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
sans-serif,
|
||||
"Apple Color Emoji",
|
||||
"Segoe UI Emoji",
|
||||
"Segoe UI Symbol";
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.codeblock-action .lang {
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.codeblock-action .btn-group {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.codeblock-action .action-btn {
|
||||
height: 28px;
|
||||
padding: 0 14px;
|
||||
font-size: 14px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #d9d9d9;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.codeblock-action .action-btn:hover {
|
||||
border-color: #18a058;
|
||||
color: #18a058;
|
||||
}
|
||||
</style>
|
||||
Vendored
+12
@@ -0,0 +1,12 @@
|
||||
interface ImportMetaEnv {
|
||||
readonly PUBLIC_WEB_URL: string
|
||||
readonly PUBLIC_BASE_URL: string
|
||||
readonly PUBLIC_ADMIN_URL: string
|
||||
readonly PUBLIC_MAXKB_URL: string
|
||||
readonly PUBLIC_ICONIFY_URL: string
|
||||
readonly PUBLIC_WS_URL: string
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #d0d0d0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #b0b0b0;
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import { createApp } from "vue"
|
||||
import { create } from "naive-ui"
|
||||
import App from "./App.vue"
|
||||
import "./global.css"
|
||||
import { addAPIProvider } from "@iconify/vue"
|
||||
|
||||
//@ts-ignore
|
||||
import "github-markdown-css/github-markdown-light.css"
|
||||
|
||||
import { marked } from "marked"
|
||||
import alert from "marked-alert"
|
||||
import { markedHighlight } from "marked-highlight"
|
||||
import preview from "marked-code-preview"
|
||||
import { alertVariants } from "./utils/const"
|
||||
|
||||
import hljs from "highlight.js/lib/core"
|
||||
import xml from "highlight.js/lib/languages/xml"
|
||||
import css from "highlight.js/lib/languages/css"
|
||||
import javascript from "highlight.js/lib/languages/javascript"
|
||||
import plaintext from "highlight.js/lib/languages/plaintext"
|
||||
//@ts-ignore
|
||||
import "highlight.js/styles/github.min.css"
|
||||
import { router } from "./router"
|
||||
|
||||
hljs.registerLanguage("html", xml)
|
||||
hljs.registerLanguage("css", css)
|
||||
hljs.registerLanguage("js", javascript)
|
||||
hljs.registerLanguage("javascript", javascript)
|
||||
hljs.registerLanguage("plaintext", plaintext)
|
||||
|
||||
marked.use({
|
||||
gfm: true,
|
||||
})
|
||||
marked.use(
|
||||
markedHighlight({
|
||||
langPrefix: "hljs language-",
|
||||
highlight(code, lang) {
|
||||
const language = hljs.getLanguage(lang) ? lang : "plaintext"
|
||||
return hljs.highlight(code, { language }).value
|
||||
},
|
||||
}),
|
||||
)
|
||||
marked.use(alert({ variants: alertVariants }))
|
||||
|
||||
const template = `<div class="markedown-body-preview">{preview}</div>`
|
||||
marked.use(preview({ template }))
|
||||
|
||||
const app = createApp(App)
|
||||
const naive = create()
|
||||
|
||||
app.use(naive)
|
||||
app.use(router)
|
||||
app.mount("#app")
|
||||
|
||||
if (!!import.meta.env.PUBLIC_ICONIFY_URL) {
|
||||
addAPIProvider("", {
|
||||
resources: [import.meta.env.PUBLIC_ICONIFY_URL],
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,421 @@
|
||||
<template>
|
||||
<div class="challenge-layout">
|
||||
<div class="challenge-sider">
|
||||
<n-tabs v-model:value="activeTab" type="line" class="left-tabs">
|
||||
<template #prefix>
|
||||
<n-button text @click="back" style="margin: 0 8px">
|
||||
<Icon :width="20" icon="pepicons-pencil:arrow-left" />
|
||||
</n-button>
|
||||
</template>
|
||||
<template #suffix>
|
||||
<n-flex style="margin: 0 8px">
|
||||
<n-button
|
||||
v-if="roleAdmin || roleSuper"
|
||||
text
|
||||
@click="showStats = true"
|
||||
>
|
||||
<Icon :width="16" icon="lucide:bar-chart-2" />
|
||||
</n-button>
|
||||
<n-button
|
||||
v-if="authed"
|
||||
text
|
||||
@click="
|
||||
$router.push({ name: 'submissions', params: { page: 1 } })
|
||||
"
|
||||
>
|
||||
<Icon :width="16" icon="lucide:list" />
|
||||
</n-button>
|
||||
<n-button v-if="roleSuper" text @click="edit">
|
||||
<Icon :width="16" icon="lucide:edit" />
|
||||
</n-button>
|
||||
</n-flex>
|
||||
</template>
|
||||
<n-tab-pane name="desc" tab="挑战描述" display-directive="show">
|
||||
<div class="desc-pane">
|
||||
<div class="challenge-meta">
|
||||
<n-flex align="center" justify="space-between">
|
||||
<n-text depth="3">
|
||||
出题人:{{ challengeAuthor || "未设置" }}
|
||||
</n-text>
|
||||
<n-flex align="center" size="small">
|
||||
<n-button
|
||||
v-if="assets.length"
|
||||
size="small"
|
||||
@click="showAssets = true"
|
||||
>
|
||||
看素材
|
||||
</n-button>
|
||||
<n-button
|
||||
v-if="exampleCode"
|
||||
size="small"
|
||||
@click="previewExample"
|
||||
>
|
||||
看示例
|
||||
</n-button>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
</div>
|
||||
<div
|
||||
class="markdown-body content no-select"
|
||||
v-html="challengeContent"
|
||||
ref="$desc"
|
||||
@copy.prevent
|
||||
/>
|
||||
</div>
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="chat" tab="AI 对话" display-directive="show">
|
||||
<PromptPanel
|
||||
@deleted="historyRefreshKey++"
|
||||
@submitted="historyRefreshKey++"
|
||||
/>
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="external" tab="手动提交" display-directive="show">
|
||||
<ExternalAIPanel :task-id="taskId" @submitted="historyRefreshKey++" />
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="history" tab="历史对话" display-directive="show">
|
||||
<PromptHistoryPanel
|
||||
:task-id="taskId"
|
||||
:active="activeTab === 'history'"
|
||||
:asset-base-url="assetBaseUrl"
|
||||
:refresh-key="historyRefreshKey"
|
||||
@select="previewHistoryItem"
|
||||
@deleted="removeMessagePair"
|
||||
/>
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</div>
|
||||
<div class="challenge-content">
|
||||
<Preview
|
||||
:html="html"
|
||||
:css="css"
|
||||
:js="js"
|
||||
:asset-base-url="assetBaseUrl"
|
||||
show-code-button
|
||||
clearable
|
||||
@showCode="showCode = true"
|
||||
@clear="clearAll"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<TaskStatsModal v-model:show="showStats" :task-id="taskId" />
|
||||
<RandomRatingModal v-if="authed" />
|
||||
<n-modal
|
||||
v-model:show="showAssets"
|
||||
preset="card"
|
||||
title="素材"
|
||||
style="width: 500px"
|
||||
>
|
||||
<n-grid :cols="3" :x-gap="12" :y-gap="12">
|
||||
<n-gi v-for="asset in assets" :key="asset.name">
|
||||
<n-card size="small" :title="asset.name">
|
||||
<n-image
|
||||
:src="asset.url"
|
||||
style="width: 100%; height: 100px; object-fit: contain"
|
||||
/>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
</n-modal>
|
||||
<n-modal
|
||||
v-model:show="showCode"
|
||||
preset="card"
|
||||
title="代码"
|
||||
style="width: 700px"
|
||||
>
|
||||
<n-tabs type="line">
|
||||
<n-tab-pane name="html" tab="HTML">
|
||||
<n-code :code="html" language="html" />
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="css" tab="CSS">
|
||||
<n-code :code="css" language="css" />
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="js" tab="JS">
|
||||
<n-code :code="js" language="javascript" />
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted, onUnmounted, computed, useTemplateRef } from "vue"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
import { useMessage } from "naive-ui"
|
||||
import { Icon } from "@iconify/vue"
|
||||
import { marked, type MarkedOptions } from "marked"
|
||||
import copyFn from "copy-text-to-clipboard"
|
||||
import PromptPanel from "../components/ai/PromptPanel.vue"
|
||||
import ExternalAIPanel from "../components/ai/ExternalAIPanel.vue"
|
||||
import PromptHistoryPanel from "../components/ai/PromptHistoryPanel.vue"
|
||||
import Preview from "../components/editor/Preview.vue"
|
||||
import TaskStatsModal from "../components/task/TaskStatsModal.vue"
|
||||
import RandomRatingModal from "../components/ai/RandomRatingModal.vue"
|
||||
import { Challenge, Submission, TaskAssets } from "../api"
|
||||
import type { TaskAsset } from "../utils/type"
|
||||
import { html, css, js } from "../store/editors"
|
||||
import { taskId, taskTab, challengeDisplay } from "../store/task"
|
||||
import { TASK_TYPE } from "../utils/const"
|
||||
import { authed, roleAdmin, roleSuper } from "../store/user"
|
||||
import {
|
||||
connectPrompt,
|
||||
disconnectPrompt,
|
||||
streaming,
|
||||
setOnCodeComplete,
|
||||
removeMessagePair,
|
||||
markMessageSubmitted,
|
||||
} from "../store/prompt"
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const message = useMessage()
|
||||
|
||||
const challengeRenderer = new marked.Renderer()
|
||||
challengeRenderer.code = ({ text, lang }) => {
|
||||
const language = lang?.toLowerCase() ?? "text"
|
||||
return `<div class="codeblock-wrapper" data-lang="${language}">
|
||||
<div class="codeblock-action">
|
||||
<span class="lang">${language.toUpperCase()}</span>
|
||||
<button class="action-btn" data-action="copy">复制</button>
|
||||
</div>
|
||||
<pre><code class="language-${language}">${text}</code></pre>
|
||||
</div>`
|
||||
}
|
||||
challengeRenderer.link = ({ href, text }) =>
|
||||
`<a href="${href}" target="_blank">${text}</a>`
|
||||
|
||||
function setupCodeCopy() {
|
||||
$desc.value?.addEventListener("click", (e: MouseEvent) => {
|
||||
const btn = (e.target as HTMLElement).closest<HTMLButtonElement>("[data-action='copy']")
|
||||
if (!btn) return
|
||||
const wrapper = btn.closest<HTMLElement>("[data-lang]")!
|
||||
const code = wrapper.querySelector("code")?.textContent ?? ""
|
||||
copyFn(code)
|
||||
btn.textContent = "已复制"
|
||||
setTimeout(() => { btn.textContent = "复制" }, 1000)
|
||||
})
|
||||
}
|
||||
|
||||
const activeTab = ref("desc")
|
||||
const challengeContent = ref("")
|
||||
const challengeAuthor = ref("")
|
||||
const $desc = useTemplateRef<HTMLElement>("$desc")
|
||||
const showCode = ref(false)
|
||||
const showStats = ref(false)
|
||||
const showAssets = ref(false)
|
||||
const assets = ref<TaskAsset[]>([])
|
||||
const historyRefreshKey = ref(0)
|
||||
const exampleCode = ref<{ html: string; css: string; js: string } | null>(null)
|
||||
|
||||
const assetBaseUrl = computed(
|
||||
() => `/media/tasks/challenge/${challengeDisplay.value}/`,
|
||||
)
|
||||
|
||||
watch(streaming, (val) => {
|
||||
if (val) activeTab.value = "chat"
|
||||
})
|
||||
|
||||
async function loadChallenge() {
|
||||
const display = Number(route.params.display)
|
||||
taskTab.value = TASK_TYPE.Challenge
|
||||
challengeDisplay.value = display
|
||||
const [data, fetchedAssets] = await Promise.all([
|
||||
Challenge.get(display),
|
||||
TaskAssets.listChallenge(display),
|
||||
])
|
||||
taskId.value = data.task_ptr
|
||||
challengeAuthor.value = data.author_name ?? ""
|
||||
if (data.example_html || data.example_css || data.example_js) {
|
||||
exampleCode.value = {
|
||||
html: data.example_html ?? "",
|
||||
css: data.example_css ?? "",
|
||||
js: data.example_js ?? "",
|
||||
}
|
||||
} else {
|
||||
exampleCode.value = null
|
||||
}
|
||||
challengeContent.value = await marked.parse(data.content, {
|
||||
async: true,
|
||||
renderer: challengeRenderer,
|
||||
} as MarkedOptions)
|
||||
assets.value = fetchedAssets
|
||||
if (!authed.value) return
|
||||
connectPrompt(data.task_ptr)
|
||||
setOnCodeComplete(async (code, messageId) => {
|
||||
try {
|
||||
await Submission.create(
|
||||
taskId.value,
|
||||
{
|
||||
html: code.html ?? "",
|
||||
css: code.css ?? "",
|
||||
js: code.js ?? "",
|
||||
},
|
||||
messageId,
|
||||
)
|
||||
markMessageSubmitted(messageId)
|
||||
historyRefreshKey.value++
|
||||
message.success("已自动提交本次对话生成的代码")
|
||||
} catch {
|
||||
message.error("自动提交失败,请稍后重试")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function edit() {
|
||||
router.push({
|
||||
name: "challenge-editor",
|
||||
params: { display: route.params.display },
|
||||
})
|
||||
}
|
||||
|
||||
function previewExample() {
|
||||
if (!exampleCode.value) return
|
||||
html.value = exampleCode.value.html
|
||||
css.value = exampleCode.value.css
|
||||
js.value = exampleCode.value.js
|
||||
}
|
||||
|
||||
function clearAll() {
|
||||
html.value = ""
|
||||
css.value = ""
|
||||
js.value = ""
|
||||
}
|
||||
|
||||
function previewHistoryItem(code: { html: string; css: string; js: string }) {
|
||||
html.value = code.html
|
||||
css.value = code.css
|
||||
js.value = code.js
|
||||
}
|
||||
|
||||
function back() {
|
||||
disconnectPrompt()
|
||||
taskId.value = 0
|
||||
router.push({ name: "home-challenge-list" })
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setupCodeCopy()
|
||||
loadChallenge()
|
||||
})
|
||||
onUnmounted(disconnectPrompt)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.challenge-layout {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.challenge-sider {
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid var(--n-border-color, #efeff5);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.challenge-content {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.left-tabs {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.left-tabs :deep(.n-tabs-pane-wrapper) {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.left-tabs :deep(.n-tab-pane) {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 12px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.desc-pane {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.challenge-meta {
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid var(--n-border-color, #efeff5);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.no-select {
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.challenge-sider .codeblock-wrapper {
|
||||
padding: 1rem;
|
||||
background-color: #f6f8fa;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.challenge-sider .codeblock-wrapper pre {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
margin-bottom: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.challenge-sider .codeblock-wrapper pre code {
|
||||
padding: 0;
|
||||
font-size: 1rem;
|
||||
font-family: Monaco, monospace;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.challenge-sider .codeblock-action {
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.challenge-sider .codeblock-action .lang {
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.challenge-sider .action-btn {
|
||||
height: 28px;
|
||||
padding: 0 14px;
|
||||
font-size: 14px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #d9d9d9;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.challenge-sider .action-btn:hover {
|
||||
border-color: #18a058;
|
||||
color: #18a058;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<n-grid x-gap="10" :cols="8">
|
||||
<n-gi :span="2" class="col">
|
||||
<n-flex vertical class="list">
|
||||
<n-card
|
||||
v-for="item in list"
|
||||
:key="item.display"
|
||||
@click="show(item.display)"
|
||||
class="card"
|
||||
:header-style="{
|
||||
backgroundColor:
|
||||
item.display === challenge.display
|
||||
? 'rgba(24, 160, 80, 0.1)'
|
||||
: '',
|
||||
}"
|
||||
:embedded="!item.is_public"
|
||||
>
|
||||
<template #header>
|
||||
<n-flex align="center">
|
||||
<n-button text @click.stop="togglePublic(item.display)">
|
||||
<Icon
|
||||
width="24"
|
||||
:icon="
|
||||
item.is_public
|
||||
? 'twemoji:check-mark-button'
|
||||
: 'twemoji:locked'
|
||||
"
|
||||
></Icon>
|
||||
</n-button>
|
||||
<span>【{{ item.display }}】{{ item.title }}</span>
|
||||
<n-tag size="small" type="warning">{{ item.score }}分</n-tag>
|
||||
<n-tag size="small">出题人 {{ item.author_name || "未设置" }}</n-tag>
|
||||
</n-flex>
|
||||
</template>
|
||||
<template #header-extra>
|
||||
<n-button text type="default" @click="remove(item.display)">
|
||||
<Icon width="20" icon="material-symbols:close-rounded"></Icon>
|
||||
</n-button>
|
||||
</template>
|
||||
</n-card>
|
||||
<n-button @click="createNew">新建</n-button>
|
||||
</n-flex>
|
||||
</n-gi>
|
||||
|
||||
<n-gi :span="6" class="col">
|
||||
<n-flex vertical>
|
||||
<n-form inline :show-feedback="false">
|
||||
<n-form-item label="序号" label-placement="left">
|
||||
<n-input-number
|
||||
style="width: 100px"
|
||||
v-model:value="challenge.display"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="标题" label-placement="left">
|
||||
<n-input v-model:value="challenge.title" />
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="分数" label-placement="left">
|
||||
<n-input-number
|
||||
style="width: 100px"
|
||||
v-model:value="challenge.score"
|
||||
:min="0"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="公开" label-placement="left">
|
||||
<n-switch v-model:value="challenge.is_public" />
|
||||
</n-form-item>
|
||||
<n-form-item label="出题人" label-placement="left">
|
||||
<n-text depth="3">{{ challenge.author_name || "未设置" }}</n-text>
|
||||
</n-form-item>
|
||||
<n-form-item label-placement="left">
|
||||
<n-button type="primary" @click="submit" :disabled="!canSubmit">
|
||||
提交
|
||||
</n-button>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
<n-flex>
|
||||
<TaskAssetManager
|
||||
v-if="challenge.display"
|
||||
task-type="challenge"
|
||||
:display="challenge.display"
|
||||
/>
|
||||
<n-button
|
||||
v-if="challenge.display"
|
||||
size="small"
|
||||
@click="showExampleModal = true"
|
||||
>
|
||||
示例代码
|
||||
</n-button>
|
||||
</n-flex>
|
||||
<MarkdownEditor
|
||||
style="height: calc(100vh - 100px)"
|
||||
v-model="challenge.content"
|
||||
/>
|
||||
</n-flex>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-modal
|
||||
v-model:show="showExampleModal"
|
||||
preset="card"
|
||||
title="示例代码(点击「看示例」时显示效果)"
|
||||
style="width: 640px"
|
||||
>
|
||||
<n-input
|
||||
type="textarea"
|
||||
v-model:value="rawCode"
|
||||
placeholder="粘贴完整的前端代码,自动拆分为 HTML / CSS / JS..."
|
||||
:autosize="{ minRows: 10, maxRows: 30 }"
|
||||
/>
|
||||
<n-flex v-if="splitResult" style="margin-top: 8px">
|
||||
<n-tag size="small" type="success">HTML · {{ splitResult.html.length }} 字符</n-tag>
|
||||
<n-tag size="small" type="info">CSS · {{ splitResult.css.length }} 字符</n-tag>
|
||||
<n-tag size="small" type="warning">JS · {{ splitResult.js.length }} 字符</n-tag>
|
||||
</n-flex>
|
||||
</n-modal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, reactive, ref, watch } from "vue"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
import { Icon } from "@iconify/vue"
|
||||
import { Challenge } from "../api"
|
||||
import type { ChallengeSlim } from "../utils/type"
|
||||
import { useDialog, useMessage } from "naive-ui"
|
||||
import MarkdownEditor from "../components/dashboard/MarkdownEditor.vue"
|
||||
import TaskAssetManager from "../components/task/TaskAssetManager.vue"
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const message = useMessage()
|
||||
const confirm = useDialog()
|
||||
|
||||
const list = ref<ChallengeSlim[]>([])
|
||||
const showExampleModal = ref(false)
|
||||
const rawCode = ref("")
|
||||
const splitResult = ref<{ html: string; css: string; js: string } | null>(null)
|
||||
|
||||
function splitHtml(raw: string) {
|
||||
let result = raw
|
||||
const cssBlocks: string[] = []
|
||||
const jsBlocks: string[] = []
|
||||
result = result.replace(/<style[^>]*>([\s\S]*?)<\/style>/gi, (_, c) => {
|
||||
cssBlocks.push(c.trim())
|
||||
return ""
|
||||
})
|
||||
result = result.replace(
|
||||
/<script(?![^>]*\bsrc\b)[^>]*>([\s\S]*?)<\/script>/gi,
|
||||
(_, c) => {
|
||||
jsBlocks.push(c.trim())
|
||||
return ""
|
||||
},
|
||||
)
|
||||
return {
|
||||
html: result.trim(),
|
||||
css: cssBlocks.join("\n\n"),
|
||||
js: jsBlocks.join("\n\n"),
|
||||
}
|
||||
}
|
||||
|
||||
watch(rawCode, (val) => {
|
||||
if (!val.trim()) {
|
||||
splitResult.value = null
|
||||
challenge.example_html = null
|
||||
challenge.example_css = null
|
||||
challenge.example_js = null
|
||||
return
|
||||
}
|
||||
const split = splitHtml(val)
|
||||
splitResult.value = split
|
||||
challenge.example_html = split.html || null
|
||||
challenge.example_css = split.css || null
|
||||
challenge.example_js = split.js || null
|
||||
})
|
||||
|
||||
watch(showExampleModal, (visible) => {
|
||||
if (!visible) return
|
||||
const parts: string[] = []
|
||||
if (challenge.example_css) parts.push(`<style>\n${challenge.example_css}\n</style>`)
|
||||
if (challenge.example_html) parts.push(challenge.example_html)
|
||||
if (challenge.example_js) parts.push(`<script>\n${challenge.example_js}\n<\/script>`)
|
||||
rawCode.value = parts.join("\n\n")
|
||||
})
|
||||
const challenge = reactive({
|
||||
display: 0,
|
||||
title: "",
|
||||
content: "",
|
||||
score: 0,
|
||||
is_public: false,
|
||||
author_name: "",
|
||||
example_html: null as string | null,
|
||||
example_css: null as string | null,
|
||||
example_js: null as string | null,
|
||||
})
|
||||
|
||||
const canSubmit = computed(
|
||||
() => challenge.display && challenge.title && challenge.content,
|
||||
)
|
||||
async function getContent() {
|
||||
list.value = await Challenge.list()
|
||||
const display = Number(route.params.display)
|
||||
const target = list.value.find((item) => item.display === display)
|
||||
if (target) {
|
||||
show(display)
|
||||
} else if (list.value.length > 0) {
|
||||
show(list.value[0].display)
|
||||
}
|
||||
}
|
||||
|
||||
function createNew() {
|
||||
challenge.display = list.value[list.value.length - 1]?.display ?? 0 + 1
|
||||
challenge.title = ""
|
||||
challenge.content = ""
|
||||
challenge.score = 0
|
||||
challenge.is_public = false
|
||||
challenge.author_name = ""
|
||||
challenge.example_html = null
|
||||
challenge.example_css = null
|
||||
challenge.example_js = null
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
try {
|
||||
await Challenge.createOrUpdate(challenge)
|
||||
message.success("提交成功")
|
||||
challenge.display = 0
|
||||
challenge.title = ""
|
||||
challenge.content = ""
|
||||
challenge.score = 0
|
||||
challenge.is_public = false
|
||||
challenge.author_name = ""
|
||||
challenge.example_html = null
|
||||
challenge.example_css = null
|
||||
challenge.example_js = null
|
||||
await getContent()
|
||||
} catch (error: any) {
|
||||
message.error(error.response.data.detail)
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(display: number) {
|
||||
confirm.warning({
|
||||
title: "警告",
|
||||
content: "你确定要删除吗?",
|
||||
positiveText: "确定",
|
||||
negativeText: "取消",
|
||||
onPositiveClick: async () => {
|
||||
await Challenge.remove(display)
|
||||
message.success("删除成功")
|
||||
getContent()
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function show(display: number) {
|
||||
router.push({ name: "challenge-editor", params: { display } })
|
||||
const item = await Challenge.get(display)
|
||||
challenge.display = item.display
|
||||
challenge.title = item.title
|
||||
challenge.content = item.content
|
||||
challenge.score = item.score
|
||||
challenge.is_public = item.is_public
|
||||
challenge.author_name = item.author_name ?? ""
|
||||
challenge.example_html = item.example_html ?? null
|
||||
challenge.example_css = item.example_css ?? null
|
||||
challenge.example_js = item.example_js ?? null
|
||||
}
|
||||
|
||||
async function togglePublic(display: number) {
|
||||
const data = await Challenge.togglePublic(display)
|
||||
message.success(data.message)
|
||||
list.value = list.value.map((item) => {
|
||||
if (item.display === display) item.is_public = !item.is_public
|
||||
return item
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(getContent)
|
||||
</script>
|
||||
<style scoped>
|
||||
.list {
|
||||
overflow: auto;
|
||||
height: calc(100vh - 20px);
|
||||
}
|
||||
|
||||
.col {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.card {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.editor {
|
||||
height: calc(100vh - 200px);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<div class="creation-layout">
|
||||
<div class="creation-sider">
|
||||
<n-tabs v-model:value="activeTab" type="line" class="left-tabs">
|
||||
<template #prefix>
|
||||
<n-button text @click="back" style="margin: 0 8px">
|
||||
<Icon :width="20" icon="pepicons-pencil:arrow-left" />
|
||||
</n-button>
|
||||
</template>
|
||||
<template #suffix>
|
||||
<n-flex style="margin: 0 8px">
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-button text :loading="savingCode" @click="saveCode(true)">
|
||||
<Icon :width="16" icon="lucide:save" />
|
||||
</n-button>
|
||||
</template>
|
||||
保存当前作品
|
||||
</n-tooltip>
|
||||
</n-flex>
|
||||
</template>
|
||||
<n-tab-pane name="topic" tab="我的主题" display-directive="show">
|
||||
<div class="topic-pane">
|
||||
<n-form-item label="主题名称" :show-feedback="false">
|
||||
<n-input
|
||||
v-model:value="title"
|
||||
placeholder="给你的主题起个名字"
|
||||
maxlength="100"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
label="主题描述"
|
||||
:show-feedback="false"
|
||||
style="margin-top: 12px"
|
||||
>
|
||||
<n-input
|
||||
v-model:value="content"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 8 }"
|
||||
placeholder="想做一个什么样的页面?有哪些颜色、布局、交互?"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-flex style="margin-top: 16px">
|
||||
<n-button
|
||||
:loading="savingTopic"
|
||||
:disabled="!title.trim()"
|
||||
@click="saveTopic"
|
||||
>
|
||||
保存主题
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
:disabled="!content.trim() || streaming"
|
||||
@click="generate"
|
||||
>
|
||||
用这个主题生成
|
||||
</n-button>
|
||||
</n-flex>
|
||||
<n-text depth="3" class="topic-hint">
|
||||
自由创作只属于你自己,不会进入提交记录和评分。
|
||||
</n-text>
|
||||
</div>
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="chat" tab="AI 对话" display-directive="show">
|
||||
<PromptPanel :allow-submit="false" @deleted="historyRefreshKey++" />
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="history" tab="历史对话" display-directive="show">
|
||||
<PromptHistoryPanel
|
||||
:task-id="taskId"
|
||||
:active="activeTab === 'history'"
|
||||
:refresh-key="historyRefreshKey"
|
||||
@select="previewHistoryItem"
|
||||
@deleted="removeMessagePair"
|
||||
/>
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</div>
|
||||
<div class="creation-content">
|
||||
<Preview
|
||||
:html="html"
|
||||
:css="css"
|
||||
:js="js"
|
||||
show-code-button
|
||||
clearable
|
||||
@showCode="showCode = true"
|
||||
@clear="clearAll"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<n-modal
|
||||
v-model:show="showCode"
|
||||
preset="card"
|
||||
title="代码"
|
||||
style="width: 700px"
|
||||
>
|
||||
<n-tabs type="line">
|
||||
<n-tab-pane name="html" tab="HTML">
|
||||
<n-code :code="html" language="html" />
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="css" tab="CSS">
|
||||
<n-code :code="css" language="css" />
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="js" tab="JS">
|
||||
<n-code :code="js" language="javascript" />
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref, watch } from "vue"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
import { useMessage } from "naive-ui"
|
||||
import { Icon } from "@iconify/vue"
|
||||
import PromptPanel from "../components/ai/PromptPanel.vue"
|
||||
import PromptHistoryPanel from "../components/ai/PromptHistoryPanel.vue"
|
||||
import Preview from "../components/editor/Preview.vue"
|
||||
import { Creation } from "../api"
|
||||
import { html, css, js } from "../store/editors"
|
||||
import {
|
||||
connectPrompt,
|
||||
disconnectPrompt,
|
||||
removeMessagePair,
|
||||
sendPrompt,
|
||||
setOnCodeComplete,
|
||||
streaming,
|
||||
} from "../store/prompt"
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const message = useMessage()
|
||||
|
||||
const display = Number(route.params.display)
|
||||
const activeTab = ref("topic")
|
||||
const taskId = ref(0)
|
||||
const title = ref("")
|
||||
const content = ref("")
|
||||
const showCode = ref(false)
|
||||
const savingTopic = ref(false)
|
||||
const savingCode = ref(false)
|
||||
const historyRefreshKey = ref(0)
|
||||
|
||||
watch(streaming, (val) => {
|
||||
if (val) activeTab.value = "chat"
|
||||
})
|
||||
|
||||
async function load() {
|
||||
const data = await Creation.get(display)
|
||||
taskId.value = data.task_id
|
||||
title.value = data.title
|
||||
content.value = data.content
|
||||
html.value = data.html
|
||||
css.value = data.css
|
||||
js.value = data.js
|
||||
connectPrompt(data.task_id)
|
||||
setOnCodeComplete(() => saveCode())
|
||||
}
|
||||
|
||||
async function saveTopic() {
|
||||
if (!title.value.trim()) return
|
||||
savingTopic.value = true
|
||||
try {
|
||||
await Creation.update(display, {
|
||||
title: title.value.trim(),
|
||||
content: content.value,
|
||||
})
|
||||
message.success("主题已保存")
|
||||
} catch {
|
||||
message.error("保存失败,请重试")
|
||||
} finally {
|
||||
savingTopic.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function saveCode(notify = false) {
|
||||
savingCode.value = true
|
||||
try {
|
||||
await Creation.saveCode(display, {
|
||||
html: html.value,
|
||||
css: css.value,
|
||||
js: js.value,
|
||||
})
|
||||
if (notify) message.success("作品已保存")
|
||||
} catch {
|
||||
if (notify) message.error("保存失败,请重试")
|
||||
} finally {
|
||||
savingCode.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function generate() {
|
||||
const text = content.value.trim()
|
||||
if (!text || streaming.value) return
|
||||
activeTab.value = "chat"
|
||||
sendPrompt(text)
|
||||
}
|
||||
|
||||
function clearAll() {
|
||||
html.value = ""
|
||||
css.value = ""
|
||||
js.value = ""
|
||||
}
|
||||
|
||||
function previewHistoryItem(code: { html: string; css: string; js: string }) {
|
||||
html.value = code.html
|
||||
css.value = code.css
|
||||
js.value = code.js
|
||||
}
|
||||
|
||||
function back() {
|
||||
disconnectPrompt()
|
||||
router.push({ name: "creation-list" })
|
||||
}
|
||||
|
||||
onMounted(load)
|
||||
onUnmounted(disconnectPrompt)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.creation-layout {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.creation-sider {
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid var(--n-border-color, #efeff5);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.creation-content {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.left-tabs {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.left-tabs :deep(.n-tabs-pane-wrapper) {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.left-tabs :deep(.n-tab-pane) {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.topic-pane {
|
||||
padding: 12px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.topic-hint {
|
||||
display: block;
|
||||
margin-top: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<main class="creation-home">
|
||||
<n-flex
|
||||
justify="space-between"
|
||||
align="flex-end"
|
||||
style="margin-bottom: 32px"
|
||||
>
|
||||
<div>
|
||||
<n-flex align="center" :size="8">
|
||||
<n-button text @click="$router.push({ name: 'home' })">
|
||||
<Icon :width="20" icon="pepicons-pencil:arrow-left" />
|
||||
</n-button>
|
||||
<n-h2 style="margin: 0">自由创作</n-h2>
|
||||
</n-flex>
|
||||
<n-text depth="3">自己定一个主题,和 AI 一起把它做出来</n-text>
|
||||
</div>
|
||||
<n-button type="primary" @click="openCreate">
|
||||
<template #icon>
|
||||
<Icon icon="lucide:plus" :width="16" />
|
||||
</template>
|
||||
新建主题
|
||||
</n-button>
|
||||
</n-flex>
|
||||
|
||||
<n-spin :show="loading">
|
||||
<n-empty
|
||||
v-if="!loading && !creations.length"
|
||||
description="还没有创作,点右上角新建一个主题吧"
|
||||
style="margin-top: 72px"
|
||||
/>
|
||||
<div v-else class="card-grid">
|
||||
<n-card
|
||||
v-for="item in creations"
|
||||
:key="item.display"
|
||||
class="creation-card"
|
||||
hoverable
|
||||
@click="open(item)"
|
||||
>
|
||||
<template #header>
|
||||
<n-ellipsis style="max-width: 100%">{{ item.title }}</n-ellipsis>
|
||||
</template>
|
||||
<template #header-extra>
|
||||
<n-flex :size="4" align="center">
|
||||
<n-tag v-if="item.has_code" type="success" size="small">
|
||||
已有作品
|
||||
</n-tag>
|
||||
<n-button text @click.stop="remove(item)">
|
||||
<Icon icon="lucide:trash-2" :width="15" />
|
||||
</n-button>
|
||||
</n-flex>
|
||||
</template>
|
||||
<n-ellipsis :line-clamp="2" class="creation-desc">
|
||||
{{ item.content || "还没写主题描述" }}
|
||||
</n-ellipsis>
|
||||
<template #footer>
|
||||
<n-text depth="3" style="font-size: 12px">
|
||||
更新于 {{ formatTime(item.modified) }}
|
||||
</n-text>
|
||||
</template>
|
||||
</n-card>
|
||||
</div>
|
||||
</n-spin>
|
||||
|
||||
<n-modal
|
||||
v-model:show="showCreate"
|
||||
preset="card"
|
||||
title="新建主题"
|
||||
style="width: 520px"
|
||||
>
|
||||
<n-form>
|
||||
<n-form-item label="主题名称">
|
||||
<n-input
|
||||
v-model:value="form.title"
|
||||
placeholder="例如:我的番茄钟"
|
||||
maxlength="100"
|
||||
show-count
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="主题描述(可以之后再补充)">
|
||||
<n-input
|
||||
v-model:value="form.content"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 4, maxRows: 8 }"
|
||||
placeholder="想做一个什么样的页面?有哪些颜色、布局、交互?"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
<template #footer>
|
||||
<n-flex justify="flex-end">
|
||||
<n-button @click="showCreate = false">取消</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
:loading="creating"
|
||||
:disabled="!form.title.trim()"
|
||||
@click="submit"
|
||||
>
|
||||
创建并开始
|
||||
</n-button>
|
||||
</n-flex>
|
||||
</template>
|
||||
</n-modal>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from "vue"
|
||||
import { useRouter } from "vue-router"
|
||||
import { useDialog, useMessage } from "naive-ui"
|
||||
import { Icon } from "@iconify/vue"
|
||||
import { Creation } from "../api"
|
||||
import type { CreationSlim } from "../utils/type"
|
||||
|
||||
const router = useRouter()
|
||||
const message = useMessage()
|
||||
const dialog = useDialog()
|
||||
|
||||
const loading = ref(true)
|
||||
const creating = ref(false)
|
||||
const showCreate = ref(false)
|
||||
const creations = ref<CreationSlim[]>([])
|
||||
const form = reactive({ title: "", content: "" })
|
||||
|
||||
function formatTime(value: string) {
|
||||
return new Date(value).toLocaleString("zh-CN", {
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})
|
||||
}
|
||||
|
||||
function open(item: CreationSlim) {
|
||||
router.push({ name: "creation", params: { display: item.display } })
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
form.title = ""
|
||||
form.content = ""
|
||||
showCreate.value = true
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
const title = form.title.trim()
|
||||
if (!title) return
|
||||
creating.value = true
|
||||
try {
|
||||
const created = await Creation.create({ title, content: form.content })
|
||||
showCreate.value = false
|
||||
router.push({ name: "creation", params: { display: created.display } })
|
||||
} catch {
|
||||
message.error("创建失败,请重试")
|
||||
} finally {
|
||||
creating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function remove(item: CreationSlim) {
|
||||
dialog.warning({
|
||||
title: "删除主题",
|
||||
content: `确定删除「${item.title}」吗?和它相关的对话也会一起删除。`,
|
||||
positiveText: "删除",
|
||||
negativeText: "取消",
|
||||
onPositiveClick: async () => {
|
||||
try {
|
||||
await Creation.remove(item.display)
|
||||
creations.value = creations.value.filter(
|
||||
(c) => c.display !== item.display,
|
||||
)
|
||||
message.success("已删除")
|
||||
} catch {
|
||||
message.error("删除失败,请重试")
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
creations.value = await Creation.listMine()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.creation-home {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 20px 48px;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.creation-card {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.creation-desc {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<n-flex class="container" :wrap="false">
|
||||
<div class="sidebar">
|
||||
<div class="back-btn" @click="() => goHome($router, taskTab, step)">
|
||||
← 返回
|
||||
</div>
|
||||
<n-divider style="margin: 8px 0" />
|
||||
<div
|
||||
v-for="item in menu"
|
||||
:key="item.label"
|
||||
:class="['nav-item', { active: $route.name === item.route.name }]"
|
||||
@click="$router.push(item.route)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</n-flex>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed } from "vue"
|
||||
import { taskTab } from "../store/task"
|
||||
import { step } from "../store/tutorial"
|
||||
import { roleAdmin, roleSuper } from "../store/user"
|
||||
import { goHome } from "../utils/helper"
|
||||
|
||||
const menu = computed(() =>
|
||||
[
|
||||
{
|
||||
label: "教程",
|
||||
route: { name: "tutorial-editor", params: { display: step.value } },
|
||||
show: roleSuper.value,
|
||||
},
|
||||
{
|
||||
label: "挑战",
|
||||
route: { name: "challenge-editor", params: { display: 0 } },
|
||||
show: roleAdmin.value || roleSuper.value,
|
||||
},
|
||||
{
|
||||
label: "用户",
|
||||
route: { name: "user-manage", params: { page: 1 } },
|
||||
show: roleSuper.value,
|
||||
},
|
||||
{
|
||||
label: "工坊",
|
||||
route: { name: "showcase-manage" },
|
||||
show: roleSuper.value,
|
||||
},
|
||||
{
|
||||
label: "成绩",
|
||||
route: { name: "gradebook" },
|
||||
show: roleSuper.value,
|
||||
},
|
||||
{
|
||||
label: "提交",
|
||||
route: { name: "submissions", params: { page: 1 } },
|
||||
show: roleAdmin.value || roleSuper.value,
|
||||
},
|
||||
].filter((item) => item.show),
|
||||
)
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 110px;
|
||||
min-width: 110px;
|
||||
padding: 12px 8px;
|
||||
border-right: 1px solid #efeff5;
|
||||
background: #fafafa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
padding: 7px 10px;
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition:
|
||||
background-color 0.15s,
|
||||
color 0.15s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background-color: #f0f0f0;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
padding: 8px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
color: #444;
|
||||
transition:
|
||||
background-color 0.15s,
|
||||
color 0.15s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background-color: #e8f8f0;
|
||||
color: #18a058;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,430 @@
|
||||
<template>
|
||||
<n-flex
|
||||
vertical
|
||||
:size="12"
|
||||
style="height: 100%; min-width: 0; box-sizing: border-box; padding: 10px 10px 10px 0; overflow: hidden;"
|
||||
>
|
||||
<n-flex class="toolbar" align="center" justify="space-between" style="flex-shrink: 0;">
|
||||
<n-flex align="center" :size="8" wrap style="min-width: 0;">
|
||||
<n-select
|
||||
v-model:value="query.classname"
|
||||
class="class-select"
|
||||
:options="classOptions"
|
||||
placeholder="班级"
|
||||
:loading="classesLoading"
|
||||
/>
|
||||
<n-select
|
||||
v-model:value="query.task_type"
|
||||
class="type-select"
|
||||
:options="taskTypeOptions"
|
||||
/>
|
||||
<n-input
|
||||
v-model:value="query.username"
|
||||
class="search-input"
|
||||
clearable
|
||||
placeholder="学生搜索"
|
||||
/>
|
||||
<n-switch v-model:value="query.include_all_tasks">
|
||||
<template #checked>全部有提交任务</template>
|
||||
<template #unchecked>只看计入任务</template>
|
||||
</n-switch>
|
||||
</n-flex>
|
||||
<n-flex align="center" :size="8">
|
||||
<n-button
|
||||
secondary
|
||||
title="刷新"
|
||||
:disabled="!query.classname"
|
||||
:loading="loading"
|
||||
@click="loadGradebook"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon icon="lucide:refresh-cw" :width="15" />
|
||||
</template>
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
secondary
|
||||
:disabled="!query.classname || !gradebook"
|
||||
:loading="exporting"
|
||||
@click="exportCsv"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon icon="lucide:download" :width="15" />
|
||||
</template>
|
||||
导出 CSV
|
||||
</n-button>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
|
||||
<n-alert v-if="loadError" type="error" closable @close="loadError = ''">
|
||||
{{ loadError }}
|
||||
</n-alert>
|
||||
|
||||
<n-flex v-if="gradebook" align="center" :size="8" style="flex-shrink: 0;">
|
||||
<n-tag size="small">学生 {{ gradebook.student_count }}</n-tag>
|
||||
<n-tag size="small">任务 {{ gradebook.task_count }}</n-tag>
|
||||
<n-tag size="small" type="success">
|
||||
计入 {{ gradebook.included_task_count }}
|
||||
</n-tag>
|
||||
<n-tag size="small">
|
||||
覆盖门槛 {{ gradebook.coverage_threshold_count }} 人
|
||||
</n-tag>
|
||||
</n-flex>
|
||||
|
||||
<n-data-table
|
||||
size="small"
|
||||
striped
|
||||
flex-height
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:data="rows"
|
||||
:row-key="(row: GradebookRow) => row.user_id"
|
||||
:scroll-x="scrollX"
|
||||
style="flex: 1; min-height: 0;"
|
||||
/>
|
||||
</n-flex>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, h, onMounted, reactive, ref, watch } from "vue"
|
||||
import { Icon } from "@iconify/vue"
|
||||
import { watchDebounced } from "@vueuse/core"
|
||||
import {
|
||||
NButton,
|
||||
NTag,
|
||||
NText,
|
||||
useMessage,
|
||||
type DataTableColumn,
|
||||
} from "naive-ui"
|
||||
import { useRouter } from "vue-router"
|
||||
import { Account, Gradebook } from "../api"
|
||||
import { displayGradebookStudentName } from "../utils/gradebook"
|
||||
import type {
|
||||
GradebookCell,
|
||||
GradebookOut,
|
||||
GradebookQuery,
|
||||
GradebookRow,
|
||||
GradebookTask,
|
||||
GradebookTaskType,
|
||||
} from "../utils/type"
|
||||
|
||||
const router = useRouter()
|
||||
const message = useMessage()
|
||||
const classesLoading = ref(false)
|
||||
const loading = ref(false)
|
||||
const exporting = ref(false)
|
||||
const loadError = ref("")
|
||||
const gradebook = ref<GradebookOut | null>(null)
|
||||
const classes = ref<string[]>([])
|
||||
|
||||
const query = reactive<GradebookQuery>({
|
||||
classname: "",
|
||||
task_type: "",
|
||||
username: "",
|
||||
include_all_tasks: false,
|
||||
})
|
||||
|
||||
const taskTypeOptions: { label: string; value: GradebookTaskType | "" }[] = [
|
||||
{ label: "全部", value: "" },
|
||||
{ label: "教程", value: "tutorial" },
|
||||
{ label: "挑战", value: "challenge" },
|
||||
]
|
||||
|
||||
const classOptions = computed(() =>
|
||||
classes.value.map((classname) => ({ label: classname, value: classname })),
|
||||
)
|
||||
const rows = computed(() => gradebook.value?.rows ?? [])
|
||||
const scrollX = computed(() => 1040 + (gradebook.value?.tasks.length ?? 0) * 96)
|
||||
|
||||
function formatScore(value: number | null) {
|
||||
if (value === null) return "-"
|
||||
return Number.isInteger(value) ? String(value) : value.toFixed(2)
|
||||
}
|
||||
|
||||
function taskTitle(task: GradebookTask) {
|
||||
const typeLabel = task.task_type === "tutorial" ? "教程" : "挑战"
|
||||
return `${typeLabel}${task.display}`
|
||||
}
|
||||
|
||||
function openSubmission(cell: GradebookCell) {
|
||||
if (!cell.submitted || !cell.submission_id) return
|
||||
const { href } = router.resolve({
|
||||
name: "submission",
|
||||
params: { id: cell.submission_id },
|
||||
})
|
||||
window.open(href, "_blank")
|
||||
}
|
||||
|
||||
function gradeTagType(grade: string) {
|
||||
if (grade === "A") return "success"
|
||||
if (grade === "B") return "info"
|
||||
if (grade === "C") return "default"
|
||||
return "warning"
|
||||
}
|
||||
|
||||
function renderTaskHeader(task: GradebookTask) {
|
||||
return h("div", { class: ["task-header", { muted: !task.included }] }, [
|
||||
h("div", { class: "task-title", title: task.title }, taskTitle(task)),
|
||||
h("div", { class: "task-meta" }, [
|
||||
h("span", `${Math.round(task.coverage * 100)}%`),
|
||||
task.included
|
||||
? null
|
||||
: h(NTag, { size: "tiny", round: false }, { default: () => "未计入" }),
|
||||
]),
|
||||
])
|
||||
}
|
||||
|
||||
function renderScore(row: GradebookRow, task: GradebookTask) {
|
||||
const cell = row.scores[task.id]
|
||||
if (!cell || !cell.submitted) {
|
||||
return h(
|
||||
NText,
|
||||
{ class: "missing-cell", type: "error" },
|
||||
{ default: () => "缺交" },
|
||||
)
|
||||
}
|
||||
return h(
|
||||
NButton,
|
||||
{
|
||||
text: true,
|
||||
type: task.included ? "primary" : "default",
|
||||
class: ["score-link", { muted: !task.included }],
|
||||
onClick: (event: MouseEvent) => {
|
||||
event.stopPropagation()
|
||||
openSubmission(cell)
|
||||
},
|
||||
},
|
||||
{ default: () => formatScore(cell.score) },
|
||||
)
|
||||
}
|
||||
|
||||
function renderMissingCount(value: number) {
|
||||
if (value <= 0) return "0"
|
||||
return h(NText, { type: "error" }, { default: () => String(value) })
|
||||
}
|
||||
|
||||
const columns = computed<DataTableColumn<GradebookRow>[]>(() => {
|
||||
const tasks = gradebook.value?.tasks ?? []
|
||||
return [
|
||||
{
|
||||
title: "排名",
|
||||
key: "rank",
|
||||
width: 60,
|
||||
fixed: "left",
|
||||
},
|
||||
{
|
||||
title: "平时等级",
|
||||
key: "grade",
|
||||
width: 80,
|
||||
fixed: "left",
|
||||
render: (row) =>
|
||||
h(
|
||||
NTag,
|
||||
{ size: "small", type: gradeTagType(row.grade) },
|
||||
{ default: () => row.grade },
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "考核等级",
|
||||
key: "assessment_grade",
|
||||
width: 80,
|
||||
fixed: "left",
|
||||
render: (row) =>
|
||||
h(
|
||||
NTag,
|
||||
{ size: "small", type: gradeTagType(row.assessment_grade) },
|
||||
{ default: () => row.assessment_grade },
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "考核分数",
|
||||
key: "assessment_score",
|
||||
width: 80,
|
||||
fixed: "left",
|
||||
render: (row) => row.assessment_score,
|
||||
},
|
||||
{
|
||||
title: "学生",
|
||||
key: "username",
|
||||
width: 80,
|
||||
fixed: "left",
|
||||
render: (row) => {
|
||||
const studentName = displayGradebookStudentName(row)
|
||||
return h(NText, { title: studentName }, { default: () => studentName })
|
||||
},
|
||||
},
|
||||
...tasks.map((task) => ({
|
||||
title: () => renderTaskHeader(task),
|
||||
key: `task-${task.id}`,
|
||||
width: 96,
|
||||
align: "center" as const,
|
||||
className: task.included ? "" : "excluded-task-column",
|
||||
render: (row: GradebookRow) => renderScore(row, task),
|
||||
})),
|
||||
{
|
||||
title: "教程合计",
|
||||
key: "tutorial_total",
|
||||
width: 92,
|
||||
fixed: "right",
|
||||
render: (row) => formatScore(row.tutorial_total),
|
||||
},
|
||||
{
|
||||
title: "挑战合计",
|
||||
key: "challenge_total",
|
||||
width: 92,
|
||||
fixed: "right",
|
||||
render: (row) => formatScore(row.challenge_total),
|
||||
},
|
||||
{
|
||||
title: "总分",
|
||||
key: "total_score",
|
||||
width: 82,
|
||||
fixed: "right",
|
||||
render: (row) => formatScore(row.total_score),
|
||||
},
|
||||
{
|
||||
title: "平均",
|
||||
key: "average_score",
|
||||
width: 82,
|
||||
fixed: "right",
|
||||
render: (row) => formatScore(row.average_score),
|
||||
},
|
||||
{
|
||||
title: "已交",
|
||||
key: "submitted_task_count",
|
||||
width: 70,
|
||||
fixed: "right",
|
||||
},
|
||||
{
|
||||
title: "缺交",
|
||||
key: "missing_task_count",
|
||||
width: 70,
|
||||
fixed: "right",
|
||||
render: (row) => renderMissingCount(row.missing_task_count),
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
async function loadClasses() {
|
||||
classesLoading.value = true
|
||||
try {
|
||||
classes.value = await Account.listClasses()
|
||||
if (!query.classname && classes.value.length > 0) {
|
||||
query.classname = classes.value[0]
|
||||
}
|
||||
} finally {
|
||||
classesLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loadGradebook() {
|
||||
if (!query.classname) {
|
||||
gradebook.value = null
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
loadError.value = ""
|
||||
try {
|
||||
gradebook.value = await Gradebook.get(query)
|
||||
classes.value = gradebook.value.classes
|
||||
} catch (err: any) {
|
||||
loadError.value = err.response?.data?.detail ?? "成绩册加载失败"
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function exportCsv() {
|
||||
if (!query.classname) return
|
||||
exporting.value = true
|
||||
try {
|
||||
await Gradebook.downloadCsv(query)
|
||||
} catch (err: any) {
|
||||
message.error(err.response?.data?.detail ?? "导出失败")
|
||||
} finally {
|
||||
exporting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [query.classname, query.task_type, query.include_all_tasks],
|
||||
() => loadGradebook(),
|
||||
)
|
||||
|
||||
watchDebounced(
|
||||
() => query.username,
|
||||
() => loadGradebook(),
|
||||
{ debounce: 400, maxWait: 1000 },
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
await loadClasses()
|
||||
await loadGradebook()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.class-select {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.type-select {
|
||||
width: 112px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.task-header {
|
||||
min-width: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.task-header.muted {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.task-title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.task-meta {
|
||||
display: flex;
|
||||
min-height: 18px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
margin-top: 2px;
|
||||
color: #999;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.missing-cell {
|
||||
color: #d03050;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.score-link.muted {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
:deep(.excluded-task-column) {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.toolbar {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.class-select,
|
||||
.type-select,
|
||||
.search-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<main class="showcase">
|
||||
<n-flex justify="space-between" align="flex-end" style="margin-bottom: 32px;">
|
||||
<div>
|
||||
<n-h2 style="margin: 0 0 4px;">创意工坊</n-h2>
|
||||
<n-text depth="3">优秀作品展示</n-text>
|
||||
</div>
|
||||
</n-flex>
|
||||
|
||||
<n-spin :show="loading">
|
||||
<n-empty
|
||||
v-if="!loading && awards.length === 0"
|
||||
description="暂无展示作品"
|
||||
style="margin-top: 72px;"
|
||||
/>
|
||||
|
||||
<section
|
||||
v-for="section in awards"
|
||||
:key="section.id"
|
||||
style="margin-bottom: 48px;"
|
||||
>
|
||||
<n-flex vertical :size="4" style="margin-bottom: 16px;">
|
||||
<n-h3 style="margin: 0;">{{ section.name }}</n-h3>
|
||||
<n-text v-if="section.description" depth="3" style="font-size: 13px;">
|
||||
{{ section.description }}
|
||||
</n-text>
|
||||
</n-flex>
|
||||
|
||||
<div class="card-grid">
|
||||
<n-card
|
||||
v-for="item in section.items"
|
||||
:key="item.submission_id"
|
||||
class="work-card"
|
||||
content-style="padding: 0;"
|
||||
hoverable
|
||||
@click="openDetail(item)"
|
||||
>
|
||||
<div class="card-preview">
|
||||
<iframe
|
||||
:srcdoc="buildSrcdoc(item)"
|
||||
sandbox="allow-scripts"
|
||||
scrolling="no"
|
||||
class="preview-iframe"
|
||||
/>
|
||||
<div class="preview-overlay" />
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<n-flex justify="space-between" align="center" :wrap="false">
|
||||
<n-ellipsis style="font-size: 13px; font-weight: 600; min-width: 0; flex: 1;">
|
||||
{{ item.username }}
|
||||
</n-ellipsis>
|
||||
<n-flex align="center" :wrap="false" :size="8" style="flex-shrink: 0;">
|
||||
<n-flex align="center" :size="3">
|
||||
<Icon icon="lucide:star" :width="13" />
|
||||
<n-text style="font-size: 12px; color: #666;">
|
||||
{{ item.score.toFixed(1) }}
|
||||
</n-text>
|
||||
</n-flex>
|
||||
<n-flex align="center" :size="3">
|
||||
<Icon icon="lucide:eye" :width="13" />
|
||||
<n-text style="font-size: 12px; color: #666;">
|
||||
{{ item.view_count }}
|
||||
</n-text>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
<n-ellipsis
|
||||
style="display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: #888;"
|
||||
>
|
||||
{{ item.task_title }}
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
</n-card>
|
||||
</div>
|
||||
</section>
|
||||
</n-spin>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue"
|
||||
import { useRouter } from "vue-router"
|
||||
import { Icon } from "@iconify/vue"
|
||||
import { Showcase } from "../api"
|
||||
import type { AwardSection, ShowcaseItem } from "../utils/type"
|
||||
|
||||
const router = useRouter()
|
||||
const loading = ref(true)
|
||||
const awards = ref<AwardSection[]>([])
|
||||
|
||||
function buildSrcdoc(item: ShowcaseItem): string {
|
||||
const css = item.css ? `<style>${item.css}</style>` : ""
|
||||
const js = item.js ? `<script>${item.js}<\/script>` : ""
|
||||
return `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="/normalize.min.css" />${css}</head><body>${item.html ?? ""}${js}</body></html>`
|
||||
}
|
||||
|
||||
function openDetail(item: ShowcaseItem) {
|
||||
const { href } = router.resolve({
|
||||
name: "submission",
|
||||
params: { id: item.submission_id },
|
||||
})
|
||||
window.open(href, "_blank")
|
||||
}
|
||||
|
||||
async function init() {
|
||||
try {
|
||||
awards.value = await Showcase.list()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(init)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.showcase {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 20px 48px;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.work-card {
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.work-card:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card-preview {
|
||||
position: relative;
|
||||
height: 160px;
|
||||
overflow: hidden;
|
||||
background: #f7f8fa;
|
||||
}
|
||||
|
||||
.preview-iframe {
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
border: none;
|
||||
transform: scale(0.5);
|
||||
transform-origin: top left;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.preview-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
min-height: 72px;
|
||||
padding: 10px 12px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,650 @@
|
||||
<template>
|
||||
<n-layout has-sider style="height: 100%;">
|
||||
<n-layout-sider
|
||||
:width="260"
|
||||
bordered
|
||||
content-style="overflow: auto; height: 100%;"
|
||||
style="background: #fafafa;"
|
||||
>
|
||||
<n-flex class="panel-header" justify="space-between" align="center">
|
||||
<n-text strong>奖项</n-text>
|
||||
<n-button size="small" secondary title="新建奖项" @click="startCreate">
|
||||
<template #icon>
|
||||
<Icon icon="lucide:plus" :width="15" />
|
||||
</template>
|
||||
</n-button>
|
||||
</n-flex>
|
||||
|
||||
<n-spin :show="awardsLoading">
|
||||
<n-empty
|
||||
v-if="!awardsLoading && awards.length === 0"
|
||||
description="暂无奖项"
|
||||
size="small"
|
||||
style="margin-top: 40px;"
|
||||
/>
|
||||
<button
|
||||
v-for="award in awards"
|
||||
:key="award.id"
|
||||
type="button"
|
||||
:class="[
|
||||
'award-row',
|
||||
{ active: currentAwardId === award.id && !creating },
|
||||
]"
|
||||
@click="selectAward(award)"
|
||||
>
|
||||
<n-ellipsis style="flex: 1; min-width: 0; font-size: 14px; font-weight: 500;">
|
||||
{{ award.name }}
|
||||
</n-ellipsis>
|
||||
<n-flex align="center" :size="6" style="flex-shrink: 0; color: #777; font-size: 12px;">
|
||||
<n-tag v-if="!award.is_active" size="small">停用</n-tag>
|
||||
<span>{{ award.item_count }} 件</span>
|
||||
</n-flex>
|
||||
</button>
|
||||
</n-spin>
|
||||
</n-layout-sider>
|
||||
|
||||
<n-layout content-style="padding: 12px; overflow: auto; height: 100%; box-sizing: border-box;">
|
||||
<n-form
|
||||
:model="awardDraft"
|
||||
label-placement="left"
|
||||
label-width="82"
|
||||
style="max-width: 1100px;"
|
||||
>
|
||||
<n-grid :cols="4" :x-gap="12" :y-gap="8" responsive="screen">
|
||||
<n-form-item-gi :span="2" label="名称">
|
||||
<n-input v-model:value="awardDraft.name" placeholder="奖项名称" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi label="排序">
|
||||
<n-input-number
|
||||
v-model:value="awardDraft.sort_order"
|
||||
:show-button="false"
|
||||
style="width: 120px;"
|
||||
/>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi label="启用">
|
||||
<n-switch v-model:value="awardDraft.is_active" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="2" label="简介">
|
||||
<n-input
|
||||
v-model:value="awardDraft.description"
|
||||
placeholder="可留空"
|
||||
/>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi label="作品排序">
|
||||
<n-select
|
||||
v-model:value="awardDraft.item_ordering"
|
||||
:options="orderingOptions"
|
||||
/>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi>
|
||||
<n-flex justify="end" style="width: 100%;">
|
||||
<n-button
|
||||
type="primary"
|
||||
:disabled="!canSaveAward"
|
||||
:loading="savingAward"
|
||||
@click="saveAward"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon icon="lucide:save" :width="15" />
|
||||
</template>
|
||||
保存
|
||||
</n-button>
|
||||
<n-button
|
||||
v-if="currentAwardId && !creating"
|
||||
tertiary
|
||||
type="error"
|
||||
:loading="deletingAward"
|
||||
@click="deleteCurrentAward"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon icon="lucide:trash-2" :width="15" />
|
||||
</template>
|
||||
</n-button>
|
||||
</n-flex>
|
||||
</n-form-item-gi>
|
||||
</n-grid>
|
||||
</n-form>
|
||||
|
||||
<n-divider />
|
||||
|
||||
<n-flex justify="space-between" align="center" style="margin-bottom: 10px;">
|
||||
<n-text strong>已授奖作品</n-text>
|
||||
<n-flex align="center">
|
||||
<n-button
|
||||
size="small"
|
||||
type="primary"
|
||||
secondary
|
||||
:disabled="!currentAwardId || creating"
|
||||
@click="openAddWorkModal"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon icon="lucide:plus" :width="15" />
|
||||
</template>
|
||||
添加作品
|
||||
</n-button>
|
||||
<n-button
|
||||
size="small"
|
||||
secondary
|
||||
title="刷新"
|
||||
:disabled="!currentAwardId || creating"
|
||||
:loading="itemsLoading"
|
||||
@click="loadAwardItems"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon icon="lucide:refresh-cw" :width="15" />
|
||||
</template>
|
||||
</n-button>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
<n-data-table
|
||||
size="small"
|
||||
striped
|
||||
:columns="itemColumns"
|
||||
:data="awardItems"
|
||||
:loading="itemsLoading"
|
||||
:row-key="(row: AwardItemManageOut) => row.id"
|
||||
style="max-width: 1100px;"
|
||||
/>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
|
||||
<n-modal
|
||||
v-model:show="addWorkModalVisible"
|
||||
preset="card"
|
||||
title="添加作品"
|
||||
style="width: min(640px, calc(100vw - 32px));"
|
||||
>
|
||||
<n-flex vertical :size="12">
|
||||
<n-input-group>
|
||||
<n-input
|
||||
v-model:value="lookupSubmissionId"
|
||||
clearable
|
||||
placeholder="提交 ID"
|
||||
@keyup.enter="findSubmissionForAward"
|
||||
/>
|
||||
<n-button
|
||||
type="primary"
|
||||
:disabled="!lookupSubmissionId.trim()"
|
||||
:loading="lookupLoading"
|
||||
@click="findSubmissionForAward"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon icon="lucide:search" :width="15" />
|
||||
</template>
|
||||
查找
|
||||
</n-button>
|
||||
</n-input-group>
|
||||
|
||||
<n-alert v-if="lookupError" type="error">
|
||||
{{ lookupError }}
|
||||
</n-alert>
|
||||
|
||||
<n-flex v-if="submissionCandidate" vertical :size="12">
|
||||
<n-descriptions :column="2" size="small" bordered>
|
||||
<n-descriptions-item label="提交者">
|
||||
{{ submissionCandidate.username }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="任务">
|
||||
{{ submissionCandidate.task_title }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="得分">
|
||||
{{
|
||||
submissionCandidate.score > 0
|
||||
? submissionCandidate.score.toFixed(2)
|
||||
: "-"
|
||||
}}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="浏览">
|
||||
{{ submissionCandidate.view_count }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="提示词">
|
||||
<n-tag
|
||||
size="small"
|
||||
:type="
|
||||
submissionCandidate.has_prompt_chain ? 'success' : 'default'
|
||||
"
|
||||
>
|
||||
{{ submissionCandidate.has_prompt_chain ? "有" : "无" }}
|
||||
</n-tag>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="状态">
|
||||
<n-tag
|
||||
size="small"
|
||||
:type="candidateAlreadyAwarded ? 'default' : 'info'"
|
||||
>
|
||||
{{ candidateAlreadyAwarded ? "已添加" : "可添加" }}
|
||||
</n-tag>
|
||||
</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
<n-flex justify="end" style="width: 100%;">
|
||||
<n-button secondary @click="clearSubmissionLookup">清空</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
:disabled="candidateAlreadyAwarded"
|
||||
:loading="addingCandidate"
|
||||
@click="addCandidateToAward"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon
|
||||
:icon="candidateAlreadyAwarded ? 'lucide:check' : 'lucide:plus'"
|
||||
:width="15"
|
||||
/>
|
||||
</template>
|
||||
{{ candidateAlreadyAwarded ? "已添加" : "添加到奖项" }}
|
||||
</n-button>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, h, onMounted, reactive, ref } from "vue"
|
||||
import {
|
||||
NButton,
|
||||
NButtonGroup,
|
||||
NInputNumber,
|
||||
NTag,
|
||||
useMessage,
|
||||
type DataTableColumn,
|
||||
} from "naive-ui"
|
||||
import { Icon } from "@iconify/vue"
|
||||
import { Showcase } from "../api"
|
||||
import type {
|
||||
AwardItemManageOut,
|
||||
AwardManageIn,
|
||||
AwardManageOut,
|
||||
ItemOrdering,
|
||||
ShowcaseSubmissionLookupOut,
|
||||
} from "../utils/type"
|
||||
|
||||
const message = useMessage()
|
||||
|
||||
const awards = ref<AwardManageOut[]>([])
|
||||
const awardItems = ref<AwardItemManageOut[]>([])
|
||||
const currentAwardId = ref<number | null>(null)
|
||||
const creating = ref(false)
|
||||
const awardsLoading = ref(false)
|
||||
const itemsLoading = ref(false)
|
||||
const savingAward = ref(false)
|
||||
const deletingAward = ref(false)
|
||||
const updatingItemIds = ref(new Set<number>())
|
||||
const refreshingItemIds = ref(new Set<number>())
|
||||
const addWorkModalVisible = ref(false)
|
||||
const lookupSubmissionId = ref("")
|
||||
const lookupLoading = ref(false)
|
||||
const lookupError = ref("")
|
||||
const submissionCandidate = ref<ShowcaseSubmissionLookupOut | null>(null)
|
||||
const addingCandidate = ref(false)
|
||||
|
||||
const awardDraft = reactive<AwardManageIn>(defaultAward())
|
||||
|
||||
const orderingOptions: { label: string; value: ItemOrdering }[] = [
|
||||
{ label: "手动排序", value: "manual" },
|
||||
{ label: "授奖时间", value: "awarded_at" },
|
||||
{ label: "评分", value: "score" },
|
||||
{ label: "浏览量", value: "view_count" },
|
||||
]
|
||||
|
||||
const canSaveAward = computed(() => awardDraft.name.trim().length > 0)
|
||||
const awardedSubmissionIds = computed(
|
||||
() => new Set(awardItems.value.map((item) => item.submission_id)),
|
||||
)
|
||||
const candidateAlreadyAwarded = computed(
|
||||
() =>
|
||||
!!submissionCandidate.value &&
|
||||
awardedSubmissionIds.value.has(submissionCandidate.value.submission_id),
|
||||
)
|
||||
const nextSortOrder = computed(() => {
|
||||
if (awardItems.value.length === 0) return 0
|
||||
return Math.max(...awardItems.value.map((item) => item.sort_order)) + 1
|
||||
})
|
||||
|
||||
const itemColumns: DataTableColumn<AwardItemManageOut>[] = [
|
||||
{
|
||||
title: "排序",
|
||||
key: "sort_order",
|
||||
width: 92,
|
||||
render: (row) =>
|
||||
h(NInputNumber, {
|
||||
value: row.sort_order,
|
||||
min: 0,
|
||||
size: "small",
|
||||
showButton: false,
|
||||
class: "table-number-input",
|
||||
loading: updatingItemIds.value.has(row.id),
|
||||
"onUpdate:value": (value: number | null) =>
|
||||
updateItemOrder(row, value ?? 0),
|
||||
}),
|
||||
},
|
||||
{
|
||||
title: "提交者",
|
||||
key: "username",
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: "任务",
|
||||
key: "task_title",
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
title: "得分",
|
||||
key: "score",
|
||||
width: 72,
|
||||
render: (row) => (row.score > 0 ? row.score.toFixed(2) : "-"),
|
||||
},
|
||||
{
|
||||
title: "浏览",
|
||||
key: "view_count",
|
||||
width: 72,
|
||||
},
|
||||
{
|
||||
title: "提示词",
|
||||
key: "has_prompt_chain",
|
||||
width: 88,
|
||||
render: (row) =>
|
||||
h(
|
||||
NTag,
|
||||
{ size: "small", type: row.has_prompt_chain ? "success" : "default" },
|
||||
{ default: () => (row.has_prompt_chain ? "有" : "无") },
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
key: "is_stale",
|
||||
width: 96,
|
||||
render: (row) =>
|
||||
row.is_stale
|
||||
? h(NTag, { size: "small", type: "warning" }, { default: () => "有新提交" })
|
||||
: null,
|
||||
},
|
||||
{
|
||||
title: "",
|
||||
key: "actions",
|
||||
width: 100,
|
||||
render: (row) =>
|
||||
h(NButtonGroup, { size: "small" }, {
|
||||
default: () => [
|
||||
row.is_stale
|
||||
? h(
|
||||
NButton,
|
||||
{
|
||||
size: "small",
|
||||
secondary: true,
|
||||
type: "warning",
|
||||
title: "切换到最新提交",
|
||||
loading: refreshingItemIds.value.has(row.id),
|
||||
onClick: () => refreshAwardItem(row),
|
||||
},
|
||||
{ icon: () => h(Icon, { icon: "lucide:refresh-cw", width: 14 }) },
|
||||
)
|
||||
: null,
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
size: "small",
|
||||
tertiary: true,
|
||||
type: "error",
|
||||
title: "移除",
|
||||
onClick: () => removeAwardItem(row),
|
||||
},
|
||||
{ icon: () => h(Icon, { icon: "lucide:trash-2", width: 15 }) },
|
||||
),
|
||||
],
|
||||
}),
|
||||
},
|
||||
]
|
||||
|
||||
function defaultAward(): AwardManageIn {
|
||||
return {
|
||||
name: "",
|
||||
description: "",
|
||||
sort_order: 0,
|
||||
is_active: true,
|
||||
item_ordering: "manual",
|
||||
}
|
||||
}
|
||||
|
||||
function assignDraft(award: AwardManageIn) {
|
||||
Object.assign(awardDraft, {
|
||||
name: award.name,
|
||||
description: award.description,
|
||||
sort_order: award.sort_order,
|
||||
is_active: award.is_active,
|
||||
item_ordering: award.item_ordering,
|
||||
})
|
||||
}
|
||||
|
||||
function startCreate() {
|
||||
currentAwardId.value = null
|
||||
creating.value = true
|
||||
awardItems.value = []
|
||||
assignDraft(defaultAward())
|
||||
}
|
||||
|
||||
async function loadAwards() {
|
||||
awardsLoading.value = true
|
||||
try {
|
||||
awards.value = await Showcase.listManageAwards()
|
||||
} finally {
|
||||
awardsLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function selectAward(award: AwardManageOut) {
|
||||
currentAwardId.value = award.id
|
||||
creating.value = false
|
||||
assignDraft(award)
|
||||
await loadAwardItems()
|
||||
}
|
||||
|
||||
async function saveAward() {
|
||||
if (!canSaveAward.value) return
|
||||
const payload: AwardManageIn = {
|
||||
...awardDraft,
|
||||
name: awardDraft.name.trim(),
|
||||
description: awardDraft.description.trim(),
|
||||
}
|
||||
savingAward.value = true
|
||||
try {
|
||||
const saved =
|
||||
currentAwardId.value && !creating.value
|
||||
? await Showcase.updateAward(currentAwardId.value, payload)
|
||||
: await Showcase.createAward(payload)
|
||||
await loadAwards()
|
||||
const next = awards.value.find((award) => award.id === saved.id)
|
||||
if (next) await selectAward(next)
|
||||
message.success("已保存")
|
||||
} catch (err: any) {
|
||||
message.error(err.response?.data?.detail ?? "保存失败")
|
||||
} finally {
|
||||
savingAward.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteCurrentAward() {
|
||||
if (!currentAwardId.value || creating.value) return
|
||||
if (!window.confirm("确定删除这个奖项?")) return
|
||||
deletingAward.value = true
|
||||
try {
|
||||
await Showcase.deleteAward(currentAwardId.value)
|
||||
await loadAwards()
|
||||
if (awards.value.length > 0) await selectAward(awards.value[0])
|
||||
else startCreate()
|
||||
message.success("已删除")
|
||||
} catch (err: any) {
|
||||
message.error(err.response?.data?.detail ?? "删除失败")
|
||||
} finally {
|
||||
deletingAward.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAwardItems() {
|
||||
if (!currentAwardId.value || creating.value) {
|
||||
awardItems.value = []
|
||||
return
|
||||
}
|
||||
itemsLoading.value = true
|
||||
try {
|
||||
awardItems.value = await Showcase.listAwardItems(currentAwardId.value)
|
||||
} finally {
|
||||
itemsLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function setUpdatingItem(id: number, loading: boolean) {
|
||||
const next = new Set(updatingItemIds.value)
|
||||
if (loading) next.add(id)
|
||||
else next.delete(id)
|
||||
updatingItemIds.value = next
|
||||
}
|
||||
|
||||
function setRefreshingItem(id: number, loading: boolean) {
|
||||
const next = new Set(refreshingItemIds.value)
|
||||
if (loading) next.add(id)
|
||||
else next.delete(id)
|
||||
refreshingItemIds.value = next
|
||||
}
|
||||
|
||||
async function refreshAwardItem(row: AwardItemManageOut) {
|
||||
setRefreshingItem(row.id, true)
|
||||
try {
|
||||
const updated = await Showcase.refreshAwardItem(row.id)
|
||||
const idx = awardItems.value.findIndex((item) => item.id === row.id)
|
||||
if (idx !== -1) awardItems.value[idx] = updated
|
||||
message.success("已切换到最新提交")
|
||||
} catch (err: any) {
|
||||
message.error(err.response?.data?.detail ?? "切换失败")
|
||||
} finally {
|
||||
setRefreshingItem(row.id, false)
|
||||
}
|
||||
}
|
||||
|
||||
async function updateItemOrder(row: AwardItemManageOut, sortOrder: number) {
|
||||
if (row.sort_order === sortOrder) return
|
||||
row.sort_order = sortOrder
|
||||
setUpdatingItem(row.id, true)
|
||||
try {
|
||||
await Showcase.updateAwardItem(row.id, { sort_order: sortOrder })
|
||||
} catch (err: any) {
|
||||
message.error(err.response?.data?.detail ?? "排序更新失败")
|
||||
await loadAwardItems()
|
||||
} finally {
|
||||
setUpdatingItem(row.id, false)
|
||||
}
|
||||
}
|
||||
|
||||
async function removeAwardItem(row: AwardItemManageOut) {
|
||||
if (!window.confirm("确定移除这个作品?")) return
|
||||
try {
|
||||
await Showcase.deleteAwardItem(row.id)
|
||||
awardItems.value = awardItems.value.filter((item) => item.id !== row.id)
|
||||
await loadAwards()
|
||||
message.success("已移除")
|
||||
} catch (err: any) {
|
||||
message.error(err.response?.data?.detail ?? "移除失败")
|
||||
}
|
||||
}
|
||||
|
||||
function clearSubmissionLookup() {
|
||||
lookupSubmissionId.value = ""
|
||||
lookupError.value = ""
|
||||
submissionCandidate.value = null
|
||||
}
|
||||
|
||||
function openAddWorkModal() {
|
||||
if (!currentAwardId.value || creating.value) return
|
||||
clearSubmissionLookup()
|
||||
addWorkModalVisible.value = true
|
||||
}
|
||||
|
||||
async function findSubmissionForAward() {
|
||||
const submissionId = lookupSubmissionId.value.trim()
|
||||
if (!submissionId) return
|
||||
lookupLoading.value = true
|
||||
lookupError.value = ""
|
||||
submissionCandidate.value = null
|
||||
try {
|
||||
submissionCandidate.value =
|
||||
await Showcase.findSubmissionForAward(submissionId)
|
||||
} catch (err: any) {
|
||||
lookupError.value = err.response?.data?.detail ?? "没有找到这个提交"
|
||||
} finally {
|
||||
lookupLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function addCandidateToAward() {
|
||||
const candidate = submissionCandidate.value
|
||||
if (
|
||||
!currentAwardId.value ||
|
||||
creating.value ||
|
||||
!candidate ||
|
||||
candidateAlreadyAwarded.value
|
||||
) {
|
||||
return
|
||||
}
|
||||
addingCandidate.value = true
|
||||
try {
|
||||
const item = await Showcase.addAwardItem(currentAwardId.value, {
|
||||
submission_id: candidate.submission_id,
|
||||
sort_order: nextSortOrder.value,
|
||||
})
|
||||
awardItems.value = [...awardItems.value, item]
|
||||
await loadAwards()
|
||||
message.success("已添加作品")
|
||||
addWorkModalVisible.value = false
|
||||
clearSubmissionLookup()
|
||||
} catch (err: any) {
|
||||
message.error(err.response?.data?.detail ?? "添加作品失败")
|
||||
} finally {
|
||||
addingCandidate.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await loadAwards()
|
||||
if (awards.value.length > 0) await selectAward(awards.value[0])
|
||||
else startCreate()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.panel-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #efeff5;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.award-row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 44px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background: transparent;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.award-row:hover {
|
||||
background: #f2f5f8;
|
||||
}
|
||||
|
||||
.award-row.active {
|
||||
background: #e8f8f0;
|
||||
color: #18a058;
|
||||
}
|
||||
|
||||
:deep(.table-number-input) {
|
||||
width: 76px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,47 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, useTemplateRef } from "vue"
|
||||
import { Submission } from "../api"
|
||||
import type { SubmissionAll } from "../utils/type"
|
||||
import { buildPreviewDocument } from "../utils/previewDocument"
|
||||
|
||||
interface Props {
|
||||
id: string
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const iframe = useTemplateRef<HTMLIFrameElement>("iframe")
|
||||
|
||||
async function init() {
|
||||
const submission: SubmissionAll = await Submission.get(props.id)
|
||||
Submission.incrementView(props.id)
|
||||
|
||||
if (!iframe.value) return
|
||||
const doc = iframe.value.contentDocument
|
||||
if (doc) {
|
||||
doc.open()
|
||||
doc.write(
|
||||
buildPreviewDocument({
|
||||
html: submission.html,
|
||||
css: submission.css,
|
||||
js: submission.js,
|
||||
}),
|
||||
)
|
||||
doc.close()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(init)
|
||||
</script>
|
||||
<template>
|
||||
<iframe class="iframe" ref="iframe"></iframe>
|
||||
</template>
|
||||
<style scoped>
|
||||
.iframe {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,433 @@
|
||||
<template>
|
||||
<n-split
|
||||
class="container"
|
||||
direction="horizontal"
|
||||
:default-size="0.5"
|
||||
:min="0.2"
|
||||
:max="0.8"
|
||||
>
|
||||
<template #1>
|
||||
<n-flex
|
||||
vertical
|
||||
style="height: 100%; padding-right: 10px; overflow: hidden"
|
||||
>
|
||||
<n-flex align="center" justify="end">
|
||||
<n-select
|
||||
:value="query.flag"
|
||||
style="width: 100px"
|
||||
clearable
|
||||
placeholder="标记"
|
||||
:options="flagFilterOptions"
|
||||
@update:value="handleFlagSelect"
|
||||
/>
|
||||
<n-select
|
||||
v-model:value="query.zone"
|
||||
style="width: 100px"
|
||||
clearable
|
||||
placeholder="从夯到拉"
|
||||
:options="[
|
||||
{ label: '夯爆了', value: 'featured' },
|
||||
{ label: 'NPC', value: 'pending' },
|
||||
{ label: '拉完了', value: 'low' },
|
||||
]"
|
||||
/>
|
||||
<n-input
|
||||
style="width: 120px"
|
||||
v-model:value="query.username"
|
||||
clearable
|
||||
/>
|
||||
<n-pagination
|
||||
v-model:page="query.page"
|
||||
:page-size="10"
|
||||
:item-count="count"
|
||||
simple
|
||||
/>
|
||||
<n-button
|
||||
secondary
|
||||
style="padding: 0 10px"
|
||||
title="刷新"
|
||||
@click="init"
|
||||
>
|
||||
<Icon :width="16" icon="lucide:refresh-cw" />
|
||||
</n-button>
|
||||
</n-flex>
|
||||
<n-data-table
|
||||
flex-height
|
||||
striped
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:row-key="(row: SubmissionOut) => row.id"
|
||||
:expanded-row-keys="expandedKeys"
|
||||
@update:expanded-row-keys="handleExpand"
|
||||
:row-props="rowProps"
|
||||
:row-class-name="rowClassName"
|
||||
style="flex: 1; min-height: 0"
|
||||
/>
|
||||
</n-flex>
|
||||
</template>
|
||||
<template #2>
|
||||
<div style="height: 100%; padding-left: 10px">
|
||||
<Preview
|
||||
v-if="submission.id"
|
||||
:html="html"
|
||||
:css="css"
|
||||
:js="js"
|
||||
:submission-id="submission.id"
|
||||
@after-score="afterScore"
|
||||
@show-code="codeModal = true"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</n-split>
|
||||
|
||||
<CodeModal
|
||||
v-model:show="codeModal"
|
||||
:html="html"
|
||||
:css="css"
|
||||
:js="js"
|
||||
@copy-to-editor="copyToEditor"
|
||||
/>
|
||||
|
||||
<ChainModal
|
||||
v-model:show="chainModal"
|
||||
:submission-id="chainSubmissionId"
|
||||
:username="chainUsername"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, h, onMounted, onUnmounted, reactive, ref, watch } from "vue"
|
||||
import { NButton, NDataTable, NTag, useMessage, type DataTableColumn } from "naive-ui"
|
||||
import { Icon } from "@iconify/vue"
|
||||
import { Submission } from "../api"
|
||||
import type { SubmissionOut, FlagType } from "../utils/type"
|
||||
import { parseTime } from "../utils/helper"
|
||||
import { goHome } from "../utils/helper"
|
||||
import { TASK_TYPE } from "../utils/const"
|
||||
import { watchDebounced } from "@vueuse/core"
|
||||
import { useRouter, useRoute } from "vue-router"
|
||||
|
||||
import Preview from "../components/editor/Preview.vue"
|
||||
import TaskTitle from "../components/submissions/TaskTitle.vue"
|
||||
import CodeModal from "../components/submissions/CodeModal.vue"
|
||||
import ChainModal from "../components/submissions/ChainModal.vue"
|
||||
import FlagCell from "../components/submissions/FlagCell.vue"
|
||||
import ExpandedSubTable from "../components/submissions/ExpandedSubTable.vue"
|
||||
|
||||
import { submission } from "../store/submission"
|
||||
import { taskTab, challengeDisplay } from "../store/task"
|
||||
import { step } from "../store/tutorial"
|
||||
import { html as eHtml, css as eCss, js as eJs } from "../store/editors"
|
||||
import { roleAdmin, roleSuper, user } from "../store/user"
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const message = useMessage()
|
||||
|
||||
// 列表数据
|
||||
const data = ref<SubmissionOut[]>([])
|
||||
const count = ref(0)
|
||||
const query = reactive({
|
||||
page: Number(route.params.page),
|
||||
username: (Array.isArray(route.query.username)
|
||||
? ""
|
||||
: (route.query.username ?? "")) as string,
|
||||
flag: null as string | null,
|
||||
zone: null as string | null,
|
||||
})
|
||||
|
||||
// 当前选中提交的代码
|
||||
const html = computed(() => submission.value.html)
|
||||
const css = computed(() => submission.value.css)
|
||||
const js = computed(() => submission.value.js)
|
||||
|
||||
// Modal 状态
|
||||
const codeModal = ref(false)
|
||||
const chainModal = ref(false)
|
||||
const chainSubmissionId = ref<string>("")
|
||||
const chainUsername = ref<string>("")
|
||||
|
||||
// 展开行
|
||||
const expandedKeys = ref<string[]>([])
|
||||
const expandedData = reactive(new Map<string, SubmissionOut[]>())
|
||||
const expandedLoading = reactive(new Set<string>())
|
||||
|
||||
// 管理员判断
|
||||
const isAdmin = computed(() => roleAdmin.value || roleSuper.value)
|
||||
|
||||
// Flag 过滤选项
|
||||
const flagFilterOptions = computed(() => {
|
||||
const opts = [
|
||||
{ label: "红旗", value: "red" },
|
||||
{ label: "蓝旗", value: "blue" },
|
||||
{ label: "绿旗", value: "green" },
|
||||
{ label: "黄旗", value: "yellow" },
|
||||
{ label: "全部", value: "any" },
|
||||
]
|
||||
if (isAdmin.value) opts.push({ label: "清除", value: "_clear_all" })
|
||||
return opts
|
||||
})
|
||||
|
||||
function handleFlagSelect(value: string | null) {
|
||||
if (value === "_clear_all") {
|
||||
clearAllFlags()
|
||||
return
|
||||
}
|
||||
query.flag = value
|
||||
}
|
||||
|
||||
async function updateFlag(row: SubmissionOut, flag: FlagType) {
|
||||
await Submission.updateFlag(row.id, flag)
|
||||
row.flag = flag
|
||||
}
|
||||
|
||||
async function clearAllFlags() {
|
||||
await Submission.clearAllFlags()
|
||||
data.value = data.value.map((d) => ({ ...d, flag: null }))
|
||||
query.flag = null
|
||||
}
|
||||
|
||||
function showChain(submissionId: string, username: string) {
|
||||
chainSubmissionId.value = submissionId
|
||||
chainUsername.value = username
|
||||
chainModal.value = true
|
||||
}
|
||||
|
||||
// 表格列定义
|
||||
const columns: DataTableColumn<SubmissionOut>[] = [
|
||||
{
|
||||
type: "expand",
|
||||
expandable: () => true,
|
||||
renderExpand: (row) =>
|
||||
h(ExpandedSubTable, {
|
||||
row,
|
||||
items: expandedData.get(row.id),
|
||||
loading: expandedLoading.has(row.id),
|
||||
onSelect: (id) => getSubmissionByID(id),
|
||||
onDelete: (r, parentId) => handleDelete(r, parentId),
|
||||
"onShow-chain": (submissionId, username) =>
|
||||
showChain(submissionId, username),
|
||||
}),
|
||||
},
|
||||
{
|
||||
title: "",
|
||||
key: "flag",
|
||||
width: 50,
|
||||
render: (row) =>
|
||||
h(FlagCell, {
|
||||
flag: row.flag ?? null,
|
||||
isAdmin: isAdmin.value,
|
||||
"onUpdate:flag": (flag: FlagType) => updateFlag(row, flag),
|
||||
}),
|
||||
},
|
||||
{
|
||||
title: "",
|
||||
key: "zone",
|
||||
width: 42,
|
||||
render: (row) => {
|
||||
const map: Record<
|
||||
string,
|
||||
{ label: string; type: "success" | "default" | "warning" }
|
||||
> = {
|
||||
featured: { label: "夯", type: "success" },
|
||||
pending: { label: "N", type: "default" },
|
||||
low: { label: "拉", type: "warning" },
|
||||
}
|
||||
if (!row.zone || !map[row.zone]) return null
|
||||
const { label, type } = map[row.zone]
|
||||
return h(NTag, { size: "small", round: true, type }, () => label)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "时间",
|
||||
key: "created",
|
||||
width: 110,
|
||||
render: (row) => parseTime(row.created, "YYYY-MM-DD HH:mm:ss"),
|
||||
},
|
||||
{
|
||||
title: "提交者",
|
||||
key: "user",
|
||||
width: 80,
|
||||
render: (row) => row.username,
|
||||
},
|
||||
{
|
||||
title: "任务",
|
||||
key: "task_title",
|
||||
render: (row) => h(TaskTitle, { submission: row }),
|
||||
},
|
||||
{
|
||||
title: "得分",
|
||||
key: "score",
|
||||
width: 70,
|
||||
render: (row) => {
|
||||
const myScore = row.my_score > 0 ? String(row.my_score) : "-"
|
||||
const avgScore = row.score > 0 ? row.score.toFixed(2) : "-"
|
||||
return h(
|
||||
"div",
|
||||
{ style: { display: "flex", gap: "6px", alignItems: "baseline" } },
|
||||
[
|
||||
h("span", avgScore),
|
||||
h("span", { style: { fontSize: "11px", color: "#999" } }, myScore),
|
||||
],
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "次数",
|
||||
key: "submit_count",
|
||||
width: 60,
|
||||
render: (row) => row.submit_count || "-",
|
||||
},
|
||||
{
|
||||
title: "浏览",
|
||||
key: "view_count",
|
||||
width: 60,
|
||||
render: (row) => row.view_count || "-",
|
||||
},
|
||||
]
|
||||
|
||||
async function handleExpand(keys: (string | number)[]) {
|
||||
const strKeys = keys.map(String)
|
||||
const newKey = strKeys.find((k) => !expandedKeys.value.includes(k))
|
||||
expandedKeys.value = strKeys
|
||||
if (newKey) {
|
||||
const row = data.value.find((d) => d.id === newKey)
|
||||
if (row && !expandedData.has(newKey)) {
|
||||
expandedLoading.add(newKey)
|
||||
try {
|
||||
const items = await Submission.listByUserTask(row.userid, row.task_id)
|
||||
expandedData.set(newKey, items)
|
||||
} finally {
|
||||
expandedLoading.delete(newKey)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(row: SubmissionOut, parentId: string) {
|
||||
try {
|
||||
await Submission.delete(row.id)
|
||||
} catch (error: any) {
|
||||
message.error(error.response?.data?.detail ?? "删除失败,请重试")
|
||||
return
|
||||
}
|
||||
const items = expandedData.get(parentId)
|
||||
if (items)
|
||||
expandedData.set(
|
||||
parentId,
|
||||
items.filter((d) => d.id !== row.id),
|
||||
)
|
||||
if (submission.value.id === row.id) submission.value.id = ""
|
||||
const res = await Submission.list(query)
|
||||
data.value = res.items
|
||||
count.value = res.count
|
||||
}
|
||||
|
||||
function rowProps(row: SubmissionOut) {
|
||||
return {
|
||||
style: { cursor: "pointer" },
|
||||
onClick: () => {
|
||||
getSubmissionByID(row.id)
|
||||
handleExpand(
|
||||
expandedKeys.value.includes(row.id)
|
||||
? expandedKeys.value.filter((k) => k !== row.id)
|
||||
: [...expandedKeys.value, row.id],
|
||||
)
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function rowClassName(row: SubmissionOut) {
|
||||
return submission.value.id === row.id ? "row-active" : ""
|
||||
}
|
||||
|
||||
async function init() {
|
||||
expandedKeys.value = []
|
||||
expandedData.clear()
|
||||
const res = await Submission.list(query)
|
||||
data.value = res.items
|
||||
count.value = res.count
|
||||
}
|
||||
|
||||
async function getSubmissionByID(id: string) {
|
||||
submission.value = await Submission.get(id)
|
||||
}
|
||||
|
||||
function afterScore() {
|
||||
data.value = data.value.map((d) => {
|
||||
if (d.id === submission.value.id) d.my_score = submission.value.my_score
|
||||
return d
|
||||
})
|
||||
}
|
||||
|
||||
function copyToEditor() {
|
||||
eHtml.value = html.value
|
||||
eCss.value = css.value
|
||||
eJs.value = js.value
|
||||
goHome(router, submission.value.task_type, submission.value.task_display)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => query.page,
|
||||
(v) => {
|
||||
init()
|
||||
router.push({ params: { page: v } })
|
||||
},
|
||||
)
|
||||
watchDebounced(
|
||||
() => query.username,
|
||||
() => {
|
||||
query.page = 1
|
||||
init()
|
||||
},
|
||||
{ debounce: 500, maxWait: 1000 },
|
||||
)
|
||||
watch(
|
||||
() => query.flag,
|
||||
() => {
|
||||
query.page = 1
|
||||
init()
|
||||
},
|
||||
)
|
||||
watch(
|
||||
() => query.zone,
|
||||
() => {
|
||||
query.page = 1
|
||||
init()
|
||||
},
|
||||
)
|
||||
|
||||
onMounted(init)
|
||||
onUnmounted(() => {
|
||||
submission.value = {
|
||||
id: "",
|
||||
userid: 0,
|
||||
username: "",
|
||||
task_id: 0,
|
||||
task_display: 0,
|
||||
task_title: "",
|
||||
task_type: TASK_TYPE.Tutorial,
|
||||
score: 0,
|
||||
my_score: 0,
|
||||
html: "",
|
||||
css: "",
|
||||
js: "",
|
||||
submit_count: 0,
|
||||
view_count: 0,
|
||||
created: new Date(),
|
||||
modified: new Date(),
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.row-active td) {
|
||||
background-color: rgba(24, 160, 80, 0.1) !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<n-grid x-gap="10" :cols="8">
|
||||
<n-gi :span="2" class="col">
|
||||
<n-flex vertical class="list">
|
||||
<n-card
|
||||
v-for="item in list"
|
||||
:key="item.display"
|
||||
@click="show(item.display)"
|
||||
class="card"
|
||||
:header-style="{
|
||||
backgroundColor:
|
||||
item.display === tutorial.display ? 'rgba(24, 160, 80, 0.1)' : '',
|
||||
}"
|
||||
:embedded="!item.is_public"
|
||||
>
|
||||
<template #header>
|
||||
<n-flex align="center">
|
||||
<n-button text @click.stop="togglePublic(item.display)">
|
||||
<Icon
|
||||
width="24"
|
||||
:icon="
|
||||
item.is_public
|
||||
? 'twemoji:check-mark-button'
|
||||
: 'twemoji:locked'
|
||||
"
|
||||
></Icon>
|
||||
</n-button>
|
||||
<span>【{{ item.display }}】{{ item.title }}</span>
|
||||
</n-flex>
|
||||
</template>
|
||||
<template #header-extra>
|
||||
<n-button text type="default" @click="remove(item.display)">
|
||||
<Icon width="20" icon="material-symbols:close-rounded"></Icon>
|
||||
</n-button>
|
||||
</template>
|
||||
</n-card>
|
||||
<n-button @click="createNew">新建</n-button>
|
||||
</n-flex>
|
||||
</n-gi>
|
||||
|
||||
<n-gi :span="6" class="col">
|
||||
<n-flex vertical>
|
||||
<n-form inline :show-feedback="false">
|
||||
<n-form-item label="序号" label-placement="left">
|
||||
<n-input-number
|
||||
style="width: 100px"
|
||||
v-model:value="tutorial.display"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="标题" label-placement="left">
|
||||
<n-input v-model:value="tutorial.title" />
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="公开" label-placement="left">
|
||||
<n-switch v-model:value="tutorial.is_public" />
|
||||
</n-form-item>
|
||||
<n-form-item label-placement="left">
|
||||
<n-button type="primary" @click="submit" :disabled="!canSubmit">
|
||||
提交
|
||||
</n-button>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
<n-flex>
|
||||
<TaskAssetManager
|
||||
v-if="tutorial.display"
|
||||
task-type="tutorial"
|
||||
:display="tutorial.display"
|
||||
/>
|
||||
<n-button
|
||||
v-if="tutorial.display"
|
||||
size="small"
|
||||
@click="showExampleModal = true"
|
||||
>
|
||||
示例代码
|
||||
</n-button>
|
||||
</n-flex>
|
||||
<MarkdownEditor
|
||||
style="height: calc(100vh - 100px)"
|
||||
v-model="tutorial.content"
|
||||
/>
|
||||
</n-flex>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-modal
|
||||
v-model:show="showExampleModal"
|
||||
preset="card"
|
||||
title="示例代码(加载教程时自动填入编辑器)"
|
||||
style="width: 640px"
|
||||
>
|
||||
<n-input
|
||||
type="textarea"
|
||||
v-model:value="rawCode"
|
||||
placeholder="粘贴完整的前端代码,自动拆分为 HTML / CSS / JS..."
|
||||
:autosize="{ minRows: 10, maxRows: 30 }"
|
||||
/>
|
||||
<n-flex v-if="splitResult" style="margin-top: 8px">
|
||||
<n-tag size="small" type="success">HTML · {{ splitResult.html.length }} 字符</n-tag>
|
||||
<n-tag size="small" type="info">CSS · {{ splitResult.css.length }} 字符</n-tag>
|
||||
<n-tag size="small" type="warning">JS · {{ splitResult.js.length }} 字符</n-tag>
|
||||
</n-flex>
|
||||
</n-modal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, reactive, ref, watch } from "vue"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
import { Icon } from "@iconify/vue"
|
||||
import { Tutorial } from "../api"
|
||||
import type { TutorialSlim } from "../utils/type"
|
||||
import { useDialog, useMessage } from "naive-ui"
|
||||
import MarkdownEditor from "../components/dashboard/MarkdownEditor.vue"
|
||||
import TaskAssetManager from "../components/task/TaskAssetManager.vue"
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const message = useMessage()
|
||||
const confirm = useDialog()
|
||||
|
||||
const list = ref<TutorialSlim[]>([])
|
||||
const showExampleModal = ref(false)
|
||||
const rawCode = ref("")
|
||||
const splitResult = ref<{ html: string; css: string; js: string } | null>(null)
|
||||
|
||||
function splitHtml(raw: string) {
|
||||
let result = raw
|
||||
const cssBlocks: string[] = []
|
||||
const jsBlocks: string[] = []
|
||||
result = result.replace(/<style[^>]*>([\s\S]*?)<\/style>/gi, (_, c) => {
|
||||
cssBlocks.push(c.trim())
|
||||
return ""
|
||||
})
|
||||
result = result.replace(
|
||||
/<script(?![^>]*\bsrc\b)[^>]*>([\s\S]*?)<\/script>/gi,
|
||||
(_, c) => {
|
||||
jsBlocks.push(c.trim())
|
||||
return ""
|
||||
},
|
||||
)
|
||||
return {
|
||||
html: result.trim(),
|
||||
css: cssBlocks.join("\n\n"),
|
||||
js: jsBlocks.join("\n\n"),
|
||||
}
|
||||
}
|
||||
|
||||
watch(rawCode, (val) => {
|
||||
if (!val.trim()) {
|
||||
splitResult.value = null
|
||||
tutorial.example_html = null
|
||||
tutorial.example_css = null
|
||||
tutorial.example_js = null
|
||||
return
|
||||
}
|
||||
const split = splitHtml(val)
|
||||
splitResult.value = split
|
||||
tutorial.example_html = split.html || null
|
||||
tutorial.example_css = split.css || null
|
||||
tutorial.example_js = split.js || null
|
||||
})
|
||||
|
||||
watch(showExampleModal, (visible) => {
|
||||
if (!visible) return
|
||||
const parts: string[] = []
|
||||
if (tutorial.example_css) parts.push(`<style>\n${tutorial.example_css}\n</style>`)
|
||||
if (tutorial.example_html) parts.push(tutorial.example_html)
|
||||
if (tutorial.example_js) parts.push(`<script>\n${tutorial.example_js}\n<\/script>`)
|
||||
rawCode.value = parts.join("\n\n")
|
||||
})
|
||||
const tutorial = reactive({
|
||||
display: 0,
|
||||
title: "",
|
||||
content: "",
|
||||
is_public: false,
|
||||
example_html: null as string | null,
|
||||
example_css: null as string | null,
|
||||
example_js: null as string | null,
|
||||
})
|
||||
|
||||
const canSubmit = computed(
|
||||
() => tutorial.display && tutorial.title && tutorial.content,
|
||||
)
|
||||
async function getContent() {
|
||||
list.value = await Tutorial.list()
|
||||
const display = Number(route.params.display)
|
||||
const target = list.value.find((item) => item.display === display)
|
||||
if (target) {
|
||||
show(display)
|
||||
} else if (list.value.length > 0) {
|
||||
show(list.value[0]!.display)
|
||||
}
|
||||
}
|
||||
|
||||
function createNew() {
|
||||
tutorial.display = list.value[list.value.length - 1]?.display ?? 0 + 1
|
||||
tutorial.title = ""
|
||||
tutorial.content = ""
|
||||
tutorial.is_public = false
|
||||
tutorial.example_html = null
|
||||
tutorial.example_css = null
|
||||
tutorial.example_js = null
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
try {
|
||||
await Tutorial.createOrUpdate(tutorial)
|
||||
message.success("提交成功")
|
||||
tutorial.display = 0
|
||||
tutorial.title = ""
|
||||
tutorial.content = ""
|
||||
tutorial.is_public = false
|
||||
tutorial.example_html = null
|
||||
tutorial.example_css = null
|
||||
tutorial.example_js = null
|
||||
await getContent()
|
||||
} catch (error: any) {
|
||||
message.error(error.response.data.detail)
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(display: number) {
|
||||
confirm.warning({
|
||||
title: "警告",
|
||||
content: "你确定要删除吗?",
|
||||
positiveText: "确定",
|
||||
negativeText: "取消",
|
||||
onPositiveClick: async () => {
|
||||
await Tutorial.remove(display)
|
||||
message.success("删除成功")
|
||||
getContent()
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function show(display: number) {
|
||||
router.push({ name: "tutorial-editor", params: { display } })
|
||||
const item = await Tutorial.get(display)
|
||||
tutorial.display = item.display
|
||||
tutorial.title = item.title
|
||||
tutorial.content = item.content
|
||||
tutorial.is_public = item.is_public
|
||||
tutorial.example_html = item.example_html ?? null
|
||||
tutorial.example_css = item.example_css ?? null
|
||||
tutorial.example_js = item.example_js ?? null
|
||||
}
|
||||
|
||||
async function togglePublic(display: number) {
|
||||
const data = await Tutorial.togglePublic(display)
|
||||
message.success(data.message)
|
||||
list.value = list.value.map((item) => {
|
||||
if (item.display === display) item.is_public = !item.is_public
|
||||
return item
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(getContent)
|
||||
</script>
|
||||
<style scoped>
|
||||
.list {
|
||||
overflow: auto;
|
||||
height: calc(100vh - 20px);
|
||||
}
|
||||
|
||||
.col {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.card {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.editor {
|
||||
height: calc(100vh - 200px);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<n-flex vertical class="container">
|
||||
<n-flex>
|
||||
<div>
|
||||
<n-input
|
||||
style="width: 200px"
|
||||
v-model:value="query.username"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<n-select
|
||||
style="width: 120px"
|
||||
v-model:value="query.role"
|
||||
:options="roles"
|
||||
/>
|
||||
</div>
|
||||
<n-button @click="goDjangoUserAdd">新建一个</n-button>
|
||||
<n-button @click="showBatch = true">批量新建</n-button>
|
||||
<n-pagination
|
||||
v-model:page="query.page"
|
||||
:page-size="10"
|
||||
:item-count="count"
|
||||
simple
|
||||
/>
|
||||
</n-flex>
|
||||
<n-data-table striped :columns="columns" :data="users"></n-data-table>
|
||||
<n-modal
|
||||
style="width: 300px"
|
||||
:mask-closable="false"
|
||||
preset="card"
|
||||
title="批量新建 (前缀 web)"
|
||||
v-model:show="showBatch"
|
||||
>
|
||||
<n-flex vertical>
|
||||
<n-input
|
||||
placeholder="班级"
|
||||
v-model:value="classname"
|
||||
:disabled="batchLoading"
|
||||
/>
|
||||
<n-input
|
||||
rows="20"
|
||||
type="textarea"
|
||||
v-model:value="namesStr"
|
||||
:disabled="batchLoading"
|
||||
/>
|
||||
<n-button
|
||||
type="primary"
|
||||
:disabled="!(classname && !!names.length)"
|
||||
:loading="batchLoading"
|
||||
@click="batchCreateUsers"
|
||||
>
|
||||
提交
|
||||
</n-button>
|
||||
</n-flex>
|
||||
</n-modal>
|
||||
</n-flex>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, reactive, ref, h, watch, computed } from "vue"
|
||||
import { Account } from "../api"
|
||||
import { parseTime } from "../utils/helper"
|
||||
import { useMessage, type DataTableColumn } from "naive-ui"
|
||||
import { getRole, Role, type User } from "../utils/type"
|
||||
import { ADMIN_URL } from "../utils/const"
|
||||
import UserActions from "../components/dashboard/UserActions.vue"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
import { watchDebounced } from "@vueuse/core"
|
||||
|
||||
const users = ref([])
|
||||
const count = ref(0)
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const message = useMessage()
|
||||
const query = reactive({
|
||||
username: "",
|
||||
page: Number(route.params.page),
|
||||
role: "",
|
||||
})
|
||||
const showBatch = ref(false)
|
||||
const classname = ref("")
|
||||
const namesStr = ref("")
|
||||
const names = computed(() => namesStr.value.split("\n").filter((it) => !!it))
|
||||
|
||||
const batchLoading = ref(false)
|
||||
|
||||
const roles = [
|
||||
{ label: "全部权限", value: "" },
|
||||
{ label: "普通用户", value: Role.Normal },
|
||||
{ label: "管理员", value: Role.Admin },
|
||||
{ label: "超级管理员", value: Role.Super },
|
||||
]
|
||||
|
||||
const columns: DataTableColumn<User>[] = [
|
||||
{
|
||||
title: "用户名",
|
||||
key: "username",
|
||||
},
|
||||
{
|
||||
title: "密码",
|
||||
key: "raw_password",
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
key: "date_joined",
|
||||
render: (row) => parseTime(row.date_joined, "YYYY-MM-DD HH:mm:ss"),
|
||||
},
|
||||
{
|
||||
title: "上次登录",
|
||||
key: "last_login",
|
||||
render: (row) =>
|
||||
row.last_login
|
||||
? parseTime(row.last_login, "YYYY-MM-DD HH:mm:ss")
|
||||
: "从未登录",
|
||||
},
|
||||
{
|
||||
title: "权限",
|
||||
key: "role",
|
||||
render: (row) => getRole(row.role),
|
||||
},
|
||||
{
|
||||
title: "选项",
|
||||
key: "actions",
|
||||
render: (row) => h(UserActions, { user: row, onReload: init }),
|
||||
},
|
||||
]
|
||||
|
||||
function goDjangoUserAdd() {
|
||||
window.open(`${ADMIN_URL}/account/user/add/`)
|
||||
}
|
||||
|
||||
async function batchCreateUsers() {
|
||||
if (!names.value.length) return
|
||||
try {
|
||||
batchLoading.value = true
|
||||
const data = await Account.batchCreate({
|
||||
classname: classname.value,
|
||||
names: names.value,
|
||||
})
|
||||
batchLoading.value = false
|
||||
message.success(data.message)
|
||||
showBatch.value = false
|
||||
query.page = 1
|
||||
query.role = ""
|
||||
init()
|
||||
} catch (err: any) {
|
||||
batchLoading.value = false
|
||||
message.error(err.detail ?? "批量创建失败")
|
||||
}
|
||||
}
|
||||
|
||||
async function init() {
|
||||
const data = await Account.list(query)
|
||||
users.value = data.items
|
||||
count.value = data.count
|
||||
}
|
||||
|
||||
watch(
|
||||
() => query.role,
|
||||
() => {
|
||||
query.page = 1
|
||||
init()
|
||||
},
|
||||
)
|
||||
watchDebounced(
|
||||
() => query.username,
|
||||
() => {
|
||||
query.page = 1
|
||||
init()
|
||||
},
|
||||
{ debounce: 500, maxWait: 1000 },
|
||||
)
|
||||
watch(
|
||||
() => query.page,
|
||||
(v) => {
|
||||
init()
|
||||
router.push({ params: { page: v } })
|
||||
},
|
||||
)
|
||||
|
||||
onMounted(init)
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
padding: 10px 10px 10px 0;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<n-split :size="panelSize" @update-size="changeSize" min="400px" max="900px">
|
||||
<template #1>
|
||||
<TaskPanel @hide="hide" />
|
||||
</template>
|
||||
<template #2>
|
||||
<n-split direction="vertical" min="200px">
|
||||
<template #1>
|
||||
<Editors />
|
||||
</template>
|
||||
<template #2>
|
||||
<Preview
|
||||
:html="html"
|
||||
:css="css"
|
||||
:js="js"
|
||||
:asset-base-url="assetBaseUrl"
|
||||
/>
|
||||
</template>
|
||||
</n-split>
|
||||
</template>
|
||||
</n-split>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useMagicKeys, whenever } from "@vueuse/core"
|
||||
import Editors from "../components/editor/Editors.vue"
|
||||
import Preview from "../components/editor/Preview.vue"
|
||||
import TaskPanel from "../components/task/TaskPanel.vue"
|
||||
import { show, panelSize } from "../store/panel"
|
||||
import { html, css, js } from "../store/editors"
|
||||
import { assetBaseUrl } from "../store/task"
|
||||
|
||||
const { ctrl_s } = useMagicKeys({
|
||||
passive: false,
|
||||
onEventFired(e) {
|
||||
if (e.ctrlKey && e.key === "s" && e.type === "keydown") e.preventDefault()
|
||||
},
|
||||
})
|
||||
|
||||
const { ctrl_r } = useMagicKeys({
|
||||
passive: false,
|
||||
onEventFired(e) {
|
||||
if (e.ctrlKey && e.key === "r" && e.type === "keydown") e.preventDefault()
|
||||
},
|
||||
})
|
||||
|
||||
function changeSize(n: number) {
|
||||
panelSize.value = n
|
||||
if (n > 0) show.value = true
|
||||
}
|
||||
|
||||
function hide() {
|
||||
panelSize.value = 0
|
||||
show.value = false
|
||||
}
|
||||
|
||||
whenever(ctrl_s!, () => {})
|
||||
whenever(ctrl_r!, () => {})
|
||||
</script>
|
||||
@@ -0,0 +1,112 @@
|
||||
import { createWebHistory, createRouter } from "vue-router"
|
||||
import { loginModal } from "./store/modal"
|
||||
|
||||
import Workspace from "./pages/Workspace.vue"
|
||||
import { STORAGE_KEY } from "./utils/const"
|
||||
import { authed } from "./store/user"
|
||||
|
||||
const routes = [
|
||||
{ path: "/", name: "home", component: Workspace, meta: { auth: true } },
|
||||
{
|
||||
path: "/tutorial",
|
||||
name: "home-tutorial-list",
|
||||
component: Workspace,
|
||||
meta: { auth: true },
|
||||
},
|
||||
{
|
||||
path: "/tutorial/:display",
|
||||
name: "home-tutorial",
|
||||
component: Workspace,
|
||||
meta: { auth: true },
|
||||
},
|
||||
{
|
||||
path: "/challenge",
|
||||
name: "home-challenge-list",
|
||||
component: Workspace,
|
||||
meta: { auth: true },
|
||||
},
|
||||
{
|
||||
path: "/challenge/:display",
|
||||
name: "home-challenge",
|
||||
component: () => import("./pages/ChallengeDetail.vue"),
|
||||
meta: { auth: true },
|
||||
},
|
||||
{
|
||||
path: "/submissions/:page",
|
||||
name: "submissions",
|
||||
component: () => import("./pages/Submissions.vue"),
|
||||
meta: { auth: true },
|
||||
},
|
||||
{
|
||||
path: "/submission/:id",
|
||||
name: "submission",
|
||||
component: () => import("./pages/Submission.vue"),
|
||||
props: true,
|
||||
meta: { auth: true },
|
||||
},
|
||||
{
|
||||
path: "/creation",
|
||||
name: "creation-list",
|
||||
component: () => import("./pages/CreationHome.vue"),
|
||||
meta: { auth: true },
|
||||
},
|
||||
{
|
||||
path: "/creation/:display",
|
||||
name: "creation",
|
||||
component: () => import("./pages/CreationDetail.vue"),
|
||||
meta: { auth: true },
|
||||
},
|
||||
{
|
||||
path: "/showcase",
|
||||
name: "showcase",
|
||||
component: () => import("./pages/Showcase.vue"),
|
||||
meta: { auth: true },
|
||||
},
|
||||
{
|
||||
path: "/dashboard",
|
||||
name: "dashboard",
|
||||
component: () => import("./pages/Dashboard.vue"),
|
||||
meta: { auth: true },
|
||||
children: [
|
||||
{
|
||||
path: "tutorial/:display",
|
||||
name: "tutorial-editor",
|
||||
component: () => import("./pages/TutorialEditor.vue"),
|
||||
},
|
||||
{
|
||||
path: "challenge/:display",
|
||||
name: "challenge-editor",
|
||||
component: () => import("./pages/ChallengeEditor.vue"),
|
||||
},
|
||||
{
|
||||
path: "user-manage/:page",
|
||||
name: "user-manage",
|
||||
component: () => import("./pages/UserManage.vue"),
|
||||
},
|
||||
{
|
||||
path: "showcase",
|
||||
name: "showcase-manage",
|
||||
component: () => import("./pages/ShowcaseManage.vue"),
|
||||
},
|
||||
{
|
||||
path: "gradebook",
|
||||
name: "gradebook",
|
||||
component: () => import("./pages/Gradebook.vue"),
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
})
|
||||
|
||||
router.beforeEach((to) => {
|
||||
const isLoggedIn =
|
||||
authed.value || localStorage.getItem(STORAGE_KEY.LOGIN) === "true"
|
||||
if (to.meta.auth && !isLoggedIn) {
|
||||
loginModal.value = true
|
||||
return false
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,22 @@
|
||||
import { useStorage } from "@vueuse/core"
|
||||
import { STORAGE_KEY } from "../utils/const"
|
||||
|
||||
const defaultHTML = ``
|
||||
const defaultCSS = ``
|
||||
|
||||
export const html = useStorage(STORAGE_KEY.HTML, defaultHTML)
|
||||
export const css = useStorage(STORAGE_KEY.CSS, defaultCSS)
|
||||
export const js = useStorage(STORAGE_KEY.JS, "")
|
||||
|
||||
export const tab = useStorage(STORAGE_KEY.TAB, "html")
|
||||
export const size = useStorage(STORAGE_KEY.FONTSIZE, 24)
|
||||
|
||||
export function reset(lang: "html" | "css" | "js") {
|
||||
if (lang === "html") {
|
||||
html.value = defaultHTML
|
||||
} else if (lang === "css") {
|
||||
css.value = defaultCSS
|
||||
} else {
|
||||
js.value = ""
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
import { ref } from "vue"
|
||||
import { WS_BASE_URL } from "../utils/const"
|
||||
|
||||
export interface GuidanceMessage {
|
||||
role: "user" | "assistant"
|
||||
content: string
|
||||
id?: number
|
||||
}
|
||||
|
||||
export const messages = ref<GuidanceMessage[]>([])
|
||||
export const connected = ref(false)
|
||||
export const streaming = ref(false)
|
||||
export const streamingContent = ref("")
|
||||
export const isReady = ref(false)
|
||||
export const isOpen = ref(false)
|
||||
export const initialPrompt = ref("")
|
||||
|
||||
let ws: WebSocket | null = null
|
||||
let _taskId = 0
|
||||
|
||||
function setupHandlers(socket: WebSocket) {
|
||||
socket.onopen = () => {
|
||||
connected.value = true
|
||||
if (initialPrompt.value) {
|
||||
sendToSocket(initialPrompt.value)
|
||||
}
|
||||
}
|
||||
|
||||
socket.onmessage = (event) => {
|
||||
const data = JSON.parse(event.data)
|
||||
if (data.type === "init") {
|
||||
streaming.value = false
|
||||
streamingContent.value = ""
|
||||
} else if (data.type === "stream") {
|
||||
streaming.value = true
|
||||
streamingContent.value += data.content
|
||||
} else if (data.type === "complete") {
|
||||
streaming.value = false
|
||||
const content = streamingContent.value.replace(/^\[READY\]\n?/, "")
|
||||
messages.value.push({ role: "assistant", content, id: data.message_id })
|
||||
streamingContent.value = ""
|
||||
if (data.is_ready) isReady.value = true
|
||||
} else if (data.type === "error") {
|
||||
streaming.value = false
|
||||
streamingContent.value = ""
|
||||
messages.value.push({ role: "assistant", content: data.content })
|
||||
}
|
||||
}
|
||||
|
||||
socket.onclose = () => {
|
||||
connected.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function sendToSocket(content: string) {
|
||||
if (!ws || ws.readyState !== WebSocket.OPEN) return
|
||||
streaming.value = true
|
||||
messages.value.push({ role: "user", content })
|
||||
ws.send(JSON.stringify({ type: "message", content }))
|
||||
}
|
||||
|
||||
export function openGuidance(taskId: number, prompt: string) {
|
||||
if (!taskId) return
|
||||
|
||||
_taskId = taskId
|
||||
initialPrompt.value = prompt
|
||||
messages.value = []
|
||||
isReady.value = false
|
||||
streamingContent.value = ""
|
||||
isOpen.value = true
|
||||
|
||||
if (ws) ws.close()
|
||||
ws = new WebSocket(`${WS_BASE_URL}/ws/guidance/${taskId}/`)
|
||||
setupHandlers(ws)
|
||||
}
|
||||
|
||||
export function sendGuidance(content: string) {
|
||||
sendToSocket(content)
|
||||
}
|
||||
|
||||
export function stopGuidance() {
|
||||
if (
|
||||
messages.value.length > 0 &&
|
||||
messages.value[messages.value.length - 1].role === "user"
|
||||
) {
|
||||
messages.value.pop()
|
||||
}
|
||||
streaming.value = false
|
||||
streamingContent.value = ""
|
||||
if (_taskId) {
|
||||
if (ws) ws.close()
|
||||
ws = new WebSocket(`${WS_BASE_URL}/ws/guidance/${_taskId}/`)
|
||||
initialPrompt.value = ""
|
||||
setupHandlers(ws)
|
||||
}
|
||||
}
|
||||
|
||||
export function closeGuidance() {
|
||||
if (ws) {
|
||||
ws.close()
|
||||
ws = null
|
||||
}
|
||||
isOpen.value = false
|
||||
messages.value = []
|
||||
isReady.value = false
|
||||
connected.value = false
|
||||
streaming.value = false
|
||||
streamingContent.value = ""
|
||||
initialPrompt.value = ""
|
||||
_taskId = 0
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
import { ref } from "vue"
|
||||
|
||||
export const loginModal = ref(false)
|
||||
@@ -0,0 +1,5 @@
|
||||
// client/src/store/panel.ts
|
||||
import { ref } from "vue"
|
||||
|
||||
export const show = ref(true)
|
||||
export const panelSize = ref(2 / 5)
|
||||
@@ -0,0 +1,149 @@
|
||||
import { ref } from "vue"
|
||||
import { WS_BASE_URL } from "../utils/const"
|
||||
import { html, css, js } from "./editors"
|
||||
|
||||
export interface PromptMessage {
|
||||
role: "user" | "assistant"
|
||||
content: string
|
||||
id?: number // assistant message backend pk (for deletion)
|
||||
code?: { html: string | null; css: string | null; js: string | null }
|
||||
submitted?: boolean // whether this assistant message's code has been submitted
|
||||
created?: string
|
||||
}
|
||||
|
||||
export const messages = ref<PromptMessage[]>([])
|
||||
export const conversationId = ref<string>("")
|
||||
export const connected = ref(false)
|
||||
export const streaming = ref(false)
|
||||
export const streamingContent = ref("")
|
||||
export const currentTaskId = ref(0)
|
||||
let _onCodeComplete:
|
||||
| ((
|
||||
code: { html: string | null; css: string | null; js: string | null },
|
||||
messageId: number
|
||||
) => void)
|
||||
| null = null
|
||||
|
||||
export function setOnCodeComplete(fn: typeof _onCodeComplete) {
|
||||
_onCodeComplete = fn
|
||||
}
|
||||
|
||||
let ws: WebSocket | null = null
|
||||
|
||||
export function connectPrompt(taskId: number) {
|
||||
currentTaskId.value = taskId
|
||||
if (ws) ws.close()
|
||||
|
||||
ws = new WebSocket(`${WS_BASE_URL}/ws/prompt/${taskId}/`)
|
||||
|
||||
ws.onopen = () => {
|
||||
connected.value = true
|
||||
}
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
const data = JSON.parse(event.data)
|
||||
|
||||
if (data.type === "init") {
|
||||
streaming.value = false
|
||||
streamingContent.value = ""
|
||||
const alreadyLoaded = conversationId.value === data.conversation_id
|
||||
conversationId.value = data.conversation_id
|
||||
if (!alreadyLoaded) {
|
||||
messages.value = data.messages || []
|
||||
const lastAssistant = [...messages.value]
|
||||
.reverse()
|
||||
.find((m) => m.role === "assistant" && m.code)
|
||||
if (lastAssistant?.code) {
|
||||
applyCode(lastAssistant.code)
|
||||
}
|
||||
}
|
||||
} else if (data.type === "stream") {
|
||||
streaming.value = true
|
||||
streamingContent.value += data.content
|
||||
} else if (data.type === "complete") {
|
||||
streaming.value = false
|
||||
messages.value.push({
|
||||
role: "assistant",
|
||||
content: streamingContent.value,
|
||||
id: data.message_id,
|
||||
code: data.code,
|
||||
submitted: false,
|
||||
})
|
||||
streamingContent.value = ""
|
||||
if (data.code) {
|
||||
applyCode(data.code)
|
||||
if (_onCodeComplete) {
|
||||
_onCodeComplete(data.code, data.message_id)
|
||||
}
|
||||
}
|
||||
} else if (data.type === "error") {
|
||||
streaming.value = false
|
||||
streamingContent.value = ""
|
||||
messages.value.push({
|
||||
role: "assistant",
|
||||
content: data.content,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
ws.onclose = () => {
|
||||
connected.value = false
|
||||
}
|
||||
}
|
||||
|
||||
export function disconnectPrompt() {
|
||||
if (ws) {
|
||||
ws.close()
|
||||
ws = null
|
||||
}
|
||||
messages.value = []
|
||||
conversationId.value = ""
|
||||
connected.value = false
|
||||
streaming.value = false
|
||||
streamingContent.value = ""
|
||||
currentTaskId.value = 0
|
||||
_onCodeComplete = null
|
||||
}
|
||||
|
||||
export function sendPrompt(content: string, model: string = "") {
|
||||
if (!ws || ws.readyState !== WebSocket.OPEN) return
|
||||
streaming.value = true
|
||||
messages.value.push({ role: "user", content })
|
||||
ws.send(JSON.stringify({ type: "message", content, model }))
|
||||
}
|
||||
|
||||
export function stopPrompt() {
|
||||
if (
|
||||
messages.value.length > 0 &&
|
||||
messages.value[messages.value.length - 1].role === "user"
|
||||
) {
|
||||
messages.value.pop()
|
||||
}
|
||||
streaming.value = false
|
||||
streamingContent.value = ""
|
||||
if (currentTaskId.value) {
|
||||
connectPrompt(currentTaskId.value)
|
||||
}
|
||||
}
|
||||
|
||||
export function markMessageSubmitted(assistantMsgId: number) {
|
||||
const msg = messages.value.find((m) => m.id === assistantMsgId)
|
||||
if (msg) msg.submitted = true
|
||||
}
|
||||
|
||||
export function removeMessagePair(assistantMsgId: number) {
|
||||
const idx = messages.value.findIndex((m) => m.id === assistantMsgId)
|
||||
if (idx >= 1) {
|
||||
messages.value.splice(idx - 1, 2)
|
||||
}
|
||||
}
|
||||
|
||||
function applyCode(code: {
|
||||
html: string | null
|
||||
css: string | null
|
||||
js: string | null
|
||||
}) {
|
||||
if (code.html !== null) html.value = code.html
|
||||
if (code.css !== null) css.value = code.css
|
||||
if (code.js !== null) js.value = code.js
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { ref } from "vue"
|
||||
import type { SubmissionAll } from "../utils/type"
|
||||
import { TASK_TYPE } from "../utils/const"
|
||||
|
||||
export const submission = ref<SubmissionAll>({
|
||||
id: "",
|
||||
userid: 0,
|
||||
username: "",
|
||||
task_id: 0,
|
||||
task_display: 0, // 这是序号
|
||||
task_title: "",
|
||||
task_type: TASK_TYPE.Tutorial,
|
||||
score: 0.0,
|
||||
my_score: 0,
|
||||
html: "",
|
||||
css: "",
|
||||
js: "",
|
||||
created: new Date(),
|
||||
modified: new Date(),
|
||||
})
|
||||
@@ -0,0 +1,12 @@
|
||||
import { ref } from "vue"
|
||||
import { useStorage } from "@vueuse/core"
|
||||
import { TASK_TYPE } from "../utils/const"
|
||||
|
||||
const currentTask = window.location.pathname.startsWith("/challenge")
|
||||
? TASK_TYPE.Challenge
|
||||
: TASK_TYPE.Tutorial
|
||||
|
||||
export const taskTab = ref(currentTask)
|
||||
export const taskId = ref(0)
|
||||
export const challengeDisplay = useStorage("challenge-display", 0)
|
||||
export const assetBaseUrl = ref("")
|
||||
@@ -0,0 +1,34 @@
|
||||
import { useStorage } from "@vueuse/core"
|
||||
import { ref } from "vue"
|
||||
import { Tutorial } from "../api"
|
||||
|
||||
export const step = useStorage("tutorial-step", 1)
|
||||
export const tutorialIds = ref<number[]>([])
|
||||
|
||||
export async function loadTutorials(): Promise<void> {
|
||||
tutorialIds.value = await Tutorial.listDisplay()
|
||||
if (tutorialIds.value.length && !tutorialIds.value.includes(step.value)) {
|
||||
step.value = tutorialIds.value[0] as number
|
||||
}
|
||||
}
|
||||
|
||||
export function prevDisabled(): boolean {
|
||||
const i = tutorialIds.value.indexOf(step.value)
|
||||
return i <= 0
|
||||
}
|
||||
|
||||
export function nextDisabled(): boolean {
|
||||
const i = tutorialIds.value.indexOf(step.value)
|
||||
return i === -1 || i === tutorialIds.value.length - 1
|
||||
}
|
||||
|
||||
export function prev(): void {
|
||||
const i = tutorialIds.value.indexOf(step.value)
|
||||
if (i > 0) step.value = tutorialIds.value[i - 1] as number
|
||||
}
|
||||
|
||||
export function next(): void {
|
||||
const i = tutorialIds.value.indexOf(step.value)
|
||||
if (i !== -1 && i < tutorialIds.value.length - 1)
|
||||
step.value = tutorialIds.value[i + 1] as number
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { computed, reactive } from "vue"
|
||||
import { Role } from "../utils/type"
|
||||
|
||||
export const user = reactive({
|
||||
loaded: false,
|
||||
username: "",
|
||||
role: Role.Normal,
|
||||
})
|
||||
export const authed = computed(() => !!user.username)
|
||||
export const roleNormal = computed(
|
||||
() => authed.value && user.role === Role.Normal,
|
||||
)
|
||||
export const roleAdmin = computed(
|
||||
() => authed.value && user.role === Role.Admin,
|
||||
)
|
||||
export const roleSuper = computed(
|
||||
() => authed.value && user.role === Role.Super,
|
||||
)
|
||||
@@ -0,0 +1,49 @@
|
||||
export const alertVariants = [
|
||||
{
|
||||
type: "note",
|
||||
icon: '<svg class="octicon octicon-info mr-2" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>',
|
||||
title: "注意",
|
||||
},
|
||||
{
|
||||
type: "tip",
|
||||
icon: '<svg class="octicon octicon-light-bulb mr-2" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path></svg>',
|
||||
title: "提示",
|
||||
},
|
||||
{
|
||||
type: "important",
|
||||
icon: '<svg class="octicon octicon-report mr-2" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>',
|
||||
title: "重要",
|
||||
},
|
||||
{
|
||||
type: "warning",
|
||||
icon: '<svg class="octicon octicon-alert mr-2" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>',
|
||||
title: "警告",
|
||||
},
|
||||
{
|
||||
type: "caution",
|
||||
icon: '<svg class="octicon octicon-stop mr-2" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>',
|
||||
title: "小心",
|
||||
},
|
||||
]
|
||||
|
||||
export const STORAGE_KEY = {
|
||||
LOGIN: "web-isloggedin",
|
||||
HTML: "web-html",
|
||||
CSS: "web-css",
|
||||
JS: "web-js",
|
||||
TAB: "web-tab",
|
||||
FONTSIZE: "web-fontsize",
|
||||
}
|
||||
|
||||
export const ADMIN_URL = import.meta.env.PUBLIC_ADMIN_URL
|
||||
|
||||
export const BASE_URL = import.meta.env.PUBLIC_BASE_URL
|
||||
|
||||
export const WS_BASE_URL =
|
||||
import.meta.env.PUBLIC_WS_URL ||
|
||||
`${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host}`
|
||||
|
||||
export enum TASK_TYPE {
|
||||
Tutorial = "tutorial",
|
||||
Challenge = "challenge",
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
export interface GradebookStudentIdentity {
|
||||
username: string
|
||||
classname: string
|
||||
}
|
||||
|
||||
export function displayGradebookStudentName(student: GradebookStudentIdentity) {
|
||||
const generatedPrefix = `web${student.classname}`
|
||||
if (!student.classname || !student.username.startsWith(generatedPrefix)) {
|
||||
return student.username
|
||||
}
|
||||
return student.username.slice(generatedPrefix.length)
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { useDateFormat } from "@vueuse/core"
|
||||
import { TASK_TYPE } from "./const"
|
||||
|
||||
export function parseTime(utc: Date | string, format = "YYYY年M月D日") {
|
||||
const time = useDateFormat(utc, format, { locales: "zh-CN" })
|
||||
return time.value
|
||||
}
|
||||
|
||||
export function goHome(router: any, type: TASK_TYPE, display: number) {
|
||||
if (type === TASK_TYPE.Tutorial) {
|
||||
router.push({ name: "home-tutorial", params: { display } })
|
||||
} else if (type === TASK_TYPE.Challenge) {
|
||||
if (display) router.push({ name: "home-challenge", params: { display } })
|
||||
else router.push({ name: "home-challenge-list" })
|
||||
} else {
|
||||
router.push({ name: "home" })
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { marked } from "marked"
|
||||
|
||||
export function renderMarkdown(text: string): string {
|
||||
return marked.parse(text) as string
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
interface PreviewDocumentOptions {
|
||||
html: string
|
||||
css: string
|
||||
js: string
|
||||
assetBaseUrl?: string
|
||||
}
|
||||
|
||||
export function buildPreviewDocument({
|
||||
html,
|
||||
css,
|
||||
js,
|
||||
assetBaseUrl,
|
||||
}: PreviewDocumentOptions) {
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="zh-Hans-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>预览</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
${assetBaseUrl ? `<base href="${assetBaseUrl}">` : ""}
|
||||
<style>${css}</style>
|
||||
<link rel="stylesheet" href="/normalize.min.css" />
|
||||
</head>
|
||||
<body>
|
||||
${html}
|
||||
<script>${js}<\/script>
|
||||
</body>
|
||||
</html>`
|
||||
}
|
||||
@@ -0,0 +1,373 @@
|
||||
import type { TASK_TYPE } from "./const"
|
||||
|
||||
export interface PromptMessage {
|
||||
id: number
|
||||
role: string
|
||||
source?: string
|
||||
content: string
|
||||
code_html: string | null
|
||||
code_css: string | null
|
||||
code_js: string | null
|
||||
prompt_level?: number | null
|
||||
created: string
|
||||
}
|
||||
|
||||
export interface PromptHistoryItem {
|
||||
user_message_id: number
|
||||
assistant_message_id: number
|
||||
submission_id: string | null
|
||||
source: string
|
||||
prompt: string
|
||||
prompt_level: number | null
|
||||
code_html: string | null
|
||||
code_css: string | null
|
||||
code_js: string | null
|
||||
created: string
|
||||
}
|
||||
|
||||
export enum Role {
|
||||
Super = "super",
|
||||
Admin = "admin",
|
||||
Normal = "normal",
|
||||
}
|
||||
|
||||
export function getRole(role: Role) {
|
||||
return {
|
||||
[Role.Super]: "超级管理员",
|
||||
[Role.Admin]: "管理员",
|
||||
[Role.Normal]: "普通用户",
|
||||
}[role]
|
||||
}
|
||||
|
||||
export type FlagType = "red" | "blue" | "green" | "yellow" | null
|
||||
|
||||
export interface TaskAsset {
|
||||
name: string
|
||||
url: string
|
||||
}
|
||||
|
||||
export interface TutorialSlim {
|
||||
display: number
|
||||
title: string
|
||||
is_public: boolean
|
||||
}
|
||||
|
||||
export interface TutorialReturn extends TutorialSlim {
|
||||
content: string
|
||||
example_html: string | null
|
||||
example_css: string | null
|
||||
example_js: string | null
|
||||
}
|
||||
|
||||
export interface TutorialIn {
|
||||
display: number
|
||||
title: string
|
||||
content: string
|
||||
example_html?: string | null
|
||||
example_css?: string | null
|
||||
example_js?: string | null
|
||||
}
|
||||
|
||||
export interface ChallengeSlim {
|
||||
display: number
|
||||
title: string
|
||||
score: number
|
||||
pass_score: number | null
|
||||
submitted: boolean
|
||||
is_public: boolean
|
||||
author_name: string | null
|
||||
}
|
||||
|
||||
export interface ChallengeReturn extends ChallengeSlim {
|
||||
content: string
|
||||
example_html: string | null
|
||||
example_css: string | null
|
||||
example_js: string | null
|
||||
}
|
||||
|
||||
export interface ChallengeIn {
|
||||
display: number
|
||||
title: string
|
||||
content: string
|
||||
score: number
|
||||
is_public: boolean
|
||||
example_html?: string | null
|
||||
example_css?: string | null
|
||||
example_js?: string | null
|
||||
}
|
||||
|
||||
export interface CreationSlim {
|
||||
display: number
|
||||
title: string
|
||||
content: string
|
||||
created: string
|
||||
modified: string
|
||||
has_code: boolean
|
||||
}
|
||||
|
||||
export interface CreationDetail extends CreationSlim {
|
||||
task_id: number
|
||||
html: string
|
||||
css: string
|
||||
js: string
|
||||
owner_name: string
|
||||
}
|
||||
|
||||
export interface CreationIn {
|
||||
title: string
|
||||
content: string
|
||||
}
|
||||
|
||||
export interface User {
|
||||
id: number
|
||||
username: string
|
||||
date_joined: Date
|
||||
last_login: Date
|
||||
role: Role
|
||||
is_active: boolean
|
||||
}
|
||||
|
||||
export interface SubmissionOut {
|
||||
id: string
|
||||
userid: number
|
||||
username: string
|
||||
task_id: number
|
||||
task_display: number
|
||||
task_type: TASK_TYPE
|
||||
task_title: string
|
||||
score: number
|
||||
my_score: number
|
||||
flag?: FlagType
|
||||
zone?: "featured" | "low" | "pending" | null
|
||||
submit_count: number
|
||||
view_count: number
|
||||
created: Date
|
||||
modified: Date
|
||||
}
|
||||
|
||||
export interface SubmissionAll {
|
||||
id: string
|
||||
userid: number
|
||||
username: string
|
||||
task_id: number
|
||||
task_display: number
|
||||
task_type: TASK_TYPE
|
||||
task_title: string
|
||||
score: number
|
||||
my_score: number
|
||||
flag?: FlagType
|
||||
html: ""
|
||||
css: ""
|
||||
js: ""
|
||||
submit_count: number
|
||||
view_count: number
|
||||
created: Date
|
||||
modified: Date
|
||||
}
|
||||
|
||||
export interface UserTag {
|
||||
username: string
|
||||
classname: string
|
||||
}
|
||||
|
||||
export interface SubmissionCountBucket {
|
||||
count_1: number
|
||||
count_2: number
|
||||
count_3: number
|
||||
count_4_plus: number
|
||||
}
|
||||
|
||||
export interface ScoreBucket {
|
||||
range_1_2: number
|
||||
range_2_3: number
|
||||
range_3_4: number
|
||||
range_4_5: number
|
||||
range_5: number
|
||||
}
|
||||
|
||||
export interface FlagStats {
|
||||
red: number
|
||||
blue: number
|
||||
green: number
|
||||
yellow: number
|
||||
}
|
||||
|
||||
export interface TopViewedItem {
|
||||
username: string
|
||||
classname: string
|
||||
view_count: number
|
||||
submission_id: string
|
||||
}
|
||||
|
||||
export interface TaskStatsOut {
|
||||
submitted_count: number
|
||||
unsubmitted_count: number
|
||||
average_score: number | null
|
||||
unrated_count: number
|
||||
unsubmitted_users: UserTag[]
|
||||
unrated_users: UserTag[]
|
||||
submission_count_distribution: SubmissionCountBucket
|
||||
score_distribution: ScoreBucket
|
||||
flag_stats: FlagStats
|
||||
classes: string[]
|
||||
top_viewed: TopViewedItem[]
|
||||
}
|
||||
|
||||
export type GradebookTaskType = "tutorial" | "challenge"
|
||||
export type GradebookGrade = "A" | "B" | "C" | "D" | "E"
|
||||
|
||||
export interface GradebookQuery {
|
||||
classname: string
|
||||
task_type?: GradebookTaskType | ""
|
||||
username?: string
|
||||
include_all_tasks?: boolean
|
||||
}
|
||||
|
||||
export interface GradebookTask {
|
||||
id: number
|
||||
display: number
|
||||
title: string
|
||||
task_type: GradebookTaskType
|
||||
submitted_count: number
|
||||
coverage: number
|
||||
included: boolean
|
||||
}
|
||||
|
||||
export interface GradebookCell {
|
||||
score: number
|
||||
submitted: boolean
|
||||
submission_id: string | null
|
||||
}
|
||||
|
||||
export interface GradebookRow {
|
||||
user_id: number
|
||||
username: string
|
||||
classname: string
|
||||
rank: number
|
||||
grade: GradebookGrade
|
||||
assessment_grade: GradebookGrade
|
||||
assessment_score: number
|
||||
top3_score: number
|
||||
scores: Record<number, GradebookCell>
|
||||
tutorial_total: number
|
||||
challenge_total: number
|
||||
total_score: number
|
||||
average_score: number | null
|
||||
submitted_task_count: number
|
||||
missing_task_count: number
|
||||
}
|
||||
|
||||
export interface GradebookOut {
|
||||
classname: string
|
||||
classes: string[]
|
||||
task_count: number
|
||||
included_task_count: number
|
||||
student_count: number
|
||||
coverage_threshold_count: number
|
||||
tasks: GradebookTask[]
|
||||
rows: GradebookRow[]
|
||||
}
|
||||
|
||||
export interface ShowcaseItem {
|
||||
submission_id: string
|
||||
username: string
|
||||
task_title: string
|
||||
task_display: number
|
||||
score: number
|
||||
view_count: number
|
||||
html: string | null
|
||||
css: string | null
|
||||
js: string | null
|
||||
has_prompt_chain: boolean
|
||||
}
|
||||
|
||||
export interface AwardSection {
|
||||
id: number
|
||||
name: string
|
||||
description: string
|
||||
item_ordering: string
|
||||
items: ShowcaseItem[]
|
||||
}
|
||||
|
||||
export type ItemOrdering = "manual" | "awarded_at" | "score" | "view_count"
|
||||
|
||||
export interface AwardManageIn {
|
||||
name: string
|
||||
description: string
|
||||
sort_order: number
|
||||
is_active: boolean
|
||||
item_ordering: ItemOrdering
|
||||
}
|
||||
|
||||
export interface AwardManageOut extends AwardManageIn {
|
||||
id: number
|
||||
item_count: number
|
||||
}
|
||||
|
||||
export interface AwardItemIn {
|
||||
submission_id: string
|
||||
sort_order: number
|
||||
}
|
||||
|
||||
export interface AwardItemUpdateIn {
|
||||
sort_order: number
|
||||
}
|
||||
|
||||
export interface ShowcaseSubmissionLookupOut {
|
||||
submission_id: string
|
||||
username: string
|
||||
task_title: string
|
||||
task_display: number
|
||||
score: number
|
||||
view_count: number
|
||||
has_prompt_chain: boolean
|
||||
}
|
||||
|
||||
export interface AwardItemManageOut {
|
||||
id: number
|
||||
submission_id: string
|
||||
username: string
|
||||
task_title: string
|
||||
task_display: number
|
||||
score: number
|
||||
view_count: number
|
||||
sort_order: number
|
||||
awarded_at: string
|
||||
has_prompt_chain: boolean
|
||||
is_stale: boolean
|
||||
}
|
||||
|
||||
export interface ShowcaseDetail {
|
||||
submission_id: string
|
||||
username: string
|
||||
task_title: string
|
||||
task_display: number
|
||||
score: number
|
||||
view_count: number
|
||||
html: string | null
|
||||
css: string | null
|
||||
js: string | null
|
||||
awards: string[]
|
||||
has_prompt_chain: boolean
|
||||
}
|
||||
|
||||
export interface PromptRound {
|
||||
question: string
|
||||
source: string
|
||||
prompt_level: number | null
|
||||
assistant_msg_id?: number | null
|
||||
html: string | null
|
||||
css: string | null
|
||||
js: string | null
|
||||
}
|
||||
|
||||
export interface RandomRatingItem {
|
||||
submission_id: string
|
||||
username: string
|
||||
task_title: string
|
||||
task_display: number
|
||||
task_type: TASK_TYPE
|
||||
html: string | null
|
||||
css: string | null
|
||||
js: string | null
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.vue"]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["rsbuild.config.ts"]
|
||||
}
|
||||
Reference in new issue
Block a user