update

2026-03-04 00:04:45 +08:00
parent 564f0b3f21
commit 78a2d84335
17 changed files with 687 additions and 310 deletions
--- a/src/components/Challenge.vue
+++ b/src/components/Challenge.vue
@@ -1,14 +1,86 @@
 <template>
  <div class="container" v-if="taskTab === TASK_TYPE.Challenge">
-    <n-empty>暂无挑战，敬请期待</n-empty>
+    <template v-if="currentChallenge">
+      <n-flex align="center" style="margin-bottom: 12px">
+        <n-button text @click="back">
+          <Icon :width="20" icon="pepicons-pencil:arrow-left"></Icon>
+        </n-button>
+        <span style="font-weight: bold">返回挑战列表</span>
+      </n-flex>
+      <div class="markdown-body" v-html="content" />
+    </template>
+    <template v-else>
+      <n-empty v-if="!challenges.length">暂无挑战，敬请期待</n-empty>
+      <n-grid v-else :cols="3" x-gap="12" y-gap="12">
+        <n-gi v-for="item in challenges" :key="item.display">
+          <n-card hoverable class="challenge-card" @click="select(item)">
+            <template #header>
+              {{ item.title }}
+            </template>
+            <template #header-extra>
+              <n-tag type="warning" size="small">{{ item.score }}分</n-tag>
+            </template>
+          </n-card>
+        </n-gi>
+      </n-grid>
+    </template>
  </div>
 </template>
 <script setup lang="ts">
-import { taskTab } from "../store/task"
+import { ref, onMounted } from "vue"
+import { Icon } from "@iconify/vue"
+import { marked } from "marked"
+import { useRouter } from "vue-router"
+import { Challenge } from "../api"
+import { taskTab, taskId, challengeDisplay } from "../store/task"
 import { TASK_TYPE } from "../utils/const"
+import type { ChallengeSlim } from "../utils/type"
+
+const router = useRouter()
+const challenges = ref<ChallengeSlim[]>([])
+const currentChallenge = ref<ChallengeSlim | null>(null)
+const content = ref("")
+
+async function loadList() {
+  challenges.value = await Challenge.listDisplay()
+  // 从 URL 恢复选中状态
+  if (challengeDisplay.value) {
+    const item = challenges.value.find(
+      (c) => c.display === challengeDisplay.value,
+    )
+    if (item) await select(item, false)
+  }
+}
+
+async function select(item: ChallengeSlim, updateUrl = true) {
+  currentChallenge.value = item
+  challengeDisplay.value = item.display
+  if (updateUrl) {
+    router.push({ name: "home-challenge", params: { display: item.display } })
+  }
+  const data = await Challenge.get(item.display)
+  taskId.value = data.task_ptr
+  const merged = `# #${data.display} ${data.title}\n${data.content}`
+  content.value = await marked.parse(merged, { async: true })
+}
+
+function back() {
+  currentChallenge.value = null
+  challengeDisplay.value = 0
+  taskId.value = 0
+  content.value = ""
+  router.push({ name: "home-challenge-list" })
+}
+
+onMounted(loadList)
 </script>
 <style scoped>
 .container {
  padding: 16px;
+  overflow: auto;
+}
+
+.challenge-card {
+  cursor: pointer;
 }
 </style>
--- a/src/components/Editors.vue
+++ b/src/components/Editors.vue
@@ -67,7 +67,11 @@
      </n-flex>
    </n-tab-pane>
    <template #suffix>
-      <Corner @format="format" />
+      <Toolbar
+        :submit-loading="submitLoading"
+        @format="format"
+        @submit="formatAndSubmit"
+      />
    </template>
  </n-tabs>
 </template>
@@ -79,12 +83,16 @@ 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 Corner from "./Corner.vue"
+import Toolbar from "./Toolbar.vue"
 import { html, css, js, tab, size, reset } from "../store/editors"
-import { NCode, useDialog } from "naive-ui"
-import { h } from "vue"
+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
@@ -94,30 +102,34 @@ 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 {
-    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
+    await formatCode()
  } catch (err: any) {
    dialog.error({
      title: "格式化失败",
@@ -126,6 +138,40 @@ async function format() {
    })
  }
 }
+
+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 {
--- a/src/components/Task.vue
+++ b/src/components/Task.vue
@@ -11,7 +11,7 @@
          :width="20"
        ></Icon>
        <n-tabs
-          style="width: 210px"
+          style="width: 150px"
          type="segment"
          animated
          :value="taskTab"
@@ -19,22 +19,31 @@
        >
          <n-tab name="tutorial" tab="教程"></n-tab>
          <n-tab name="challenge" tab="挑战"></n-tab>
-          <n-tab
-            name="list"
-            tab="列表"
-            @click="$router.push({ name: 'submissions', params: { page: 1 } })"
-          ></n-tab>
        </n-tabs>
        <template v-if="!hideNav">
-          <n-button text @click="prev" :disabled="prevDisabled">
+          <n-button
+            text
+            @click="tutorialRef?.prev()"
+            :disabled="tutorialRef?.prevDisabled()"
+          >
            <Icon :width="24" icon="pepicons-pencil:arrow-left"></Icon>
          </n-button>
-          <n-button text @click="next" :disabled="nextDisabled">
+          <n-button
+            text
+            @click="tutorialRef?.next()"
+            :disabled="tutorialRef?.nextDisabled()"
+          >
            <Icon :width="24" icon="pepicons-pencil:arrow-right"></Icon>
          </n-button>
        </template>
      </n-flex>
      <n-flex>
+        <n-button
+          text
+          @click="$router.push({ name: 'submissions', params: { page: 1 } })"
+        >
+          <Icon :width="16" icon="lucide:list"></Icon>
+        </n-button>
        <n-button text v-if="roleSuper" @click="edit">
          <Icon :width="16" icon="lucide:edit"></Icon>
        </n-button>
@@ -43,187 +52,70 @@
        </n-button>
      </n-flex>
    </n-flex>
-    <div
-      v-if="taskTab === TASK_TYPE.Tutorial"
-      class="markdown-body"
-      v-html="content"
-      ref="$content"
-    />
+    <Tutorial v-if="taskTab === TASK_TYPE.Tutorial" ref="tutorialRef" />
    <Challenge v-else />
  </div>
 </template>
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
-import { computed, 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 { computed, onMounted, ref } from "vue"
 import { step } from "../store/tutorial"
 import { roleSuper } from "../store/user"
-import { taskId, taskTab } from "../store/task"
+import { taskTab, challengeDisplay } from "../store/task"
 import { useRoute, useRouter } from "vue-router"
 import { TASK_TYPE } from "../utils/const"
 import Challenge from "./Challenge.vue"
-import { NButton } from "naive-ui"
+import Tutorial from "./Tutorial.vue"

 const route = useRoute()
 const router = useRouter()
-const tutorialIds = ref<number[]>([])
-const content = ref("")
-const $content = useTemplateRef<any>("$content")
+const tutorialRef = ref<InstanceType<typeof Tutorial>>()

 defineEmits(["hide"])

 const hideNav = computed(
-  () => taskTab.value !== TASK_TYPE.Tutorial || tutorialIds.value.length <= 1,
+  () =>
+    taskTab.value !== TASK_TYPE.Tutorial ||
+    (tutorialRef.value?.tutorialIds?.length ?? 0) <= 1,
 )

-function changeTab(v: TASK_TYPE & "list") {
-  // 排除 list
-  if (v === "list") return
+function changeTab(v: TASK_TYPE) {
  taskTab.value = v
-  const query = { task: v } as any
-  if (v === TASK_TYPE.Tutorial) query.step = step.value
-  router.push({ query })
-}
-
-const prevDisabled = computed(() => {
-  const i = tutorialIds.value.indexOf(step.value)
-  return i <= 0
-})
-
-const nextDisabled = computed(() => {
-  const i = tutorialIds.value.indexOf(step.value)
-  return i === tutorialIds.value.length - 1
-})
-
-function prev() {
-  const i = tutorialIds.value.indexOf(step.value)
-  step.value = tutorialIds.value[i - 1]
-}
-
-function next() {
-  const i = tutorialIds.value.indexOf(step.value)
-  step.value = tutorialIds.value[i + 1]
+  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) {
+    challengeDisplay.value = 0
+    router.push({ name: "home-challenge-list" })
+  }
 }

 function edit() {
-  router.push({
-    name: taskTab.value,
-    params: taskTab.value === TASK_TYPE.Tutorial ? { display: step.value } : {},
-  })
+  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 } })
 }

-async function prepare() {
-  tutorialIds.value = await Tutorial.listDisplay()
-  if (!tutorialIds.value.length) {
-    content.value = "暂无教程"
+function init() {
+  const name = route.name as string
+  if (name.startsWith("home-tutorial")) {
+    taskTab.value = TASK_TYPE.Tutorial
+    if (route.params.display) step.value = Number(route.params.display)
+  } else if (name.startsWith("home-challenge")) {
+    taskTab.value = TASK_TYPE.Challenge
+    if (route.params.display)
+      challengeDisplay.value = Number(route.params.display)
  }
-  if (!tutorialIds.value.includes(step.value)) {
-    step.value = tutorialIds.value[0]
-  }
-}
-
-async function getContent() {
-  const data = await Tutorial.get(step.value)
-  taskId.value = data.task_ptr
-  const merged = `# #${data.display} ${data.title}\n${data.content}`
-  content.value = await marked.parse(merged, { async: true })
-}
-
-function addButton() {
-  const action = document.createElement("div")
-  action.className = "codeblock-action"
-  const pres = $content.value?.querySelectorAll("pre") ?? []
-  for (const pre of pres) {
-    let timer = 0
-    let copyTimer = 0
-    const actions = action.cloneNode() as HTMLDivElement
-    pre.insertBefore(actions, pre.children[0])
-    const $code = pre.childNodes[1] as HTMLPreElement
-    const match = $code.className.match(/-(.*)/)
-    let lang = "html"
-    if (match) lang = match[1].toLowerCase()
-
-    const langSpan = document.createElement("span")
-    langSpan.className = "lang"
-    langSpan.textContent = lang.toUpperCase()
-
-    const btnGroup = document.createElement("div")
-    btnGroup.className = "btn-group"
-
-    const copyBtn = document.createElement("button")
-    copyBtn.className = "action-btn"
-    copyBtn.textContent = "复制"
-
-    const replaceBtn = document.createElement("button")
-    replaceBtn.className = "action-btn"
-    replaceBtn.textContent = "替换"
-
-    btnGroup.appendChild(copyBtn)
-    btnGroup.appendChild(replaceBtn)
-
-    actions.appendChild(langSpan)
-    actions.appendChild(btnGroup)
-
-    copyBtn.onclick = () => {
-      const content = pre.children[1].textContent
-      copyFn(content ?? "")
-      copyBtn.textContent = "已复制"
-      clearTimeout(copyTimer)
-      copyTimer = setTimeout(() => {
-        copyBtn.textContent = "复制"
-      }, 1000)
-    }
-
-    replaceBtn.onclick = () => {
-      tab.value = lang
-      const content = pre.children[1].textContent
-      if (lang === "html") html.value = content
-      if (lang === "css") css.value = content
-      if (lang === "js") js.value = content
-      replaceBtn.textContent = "已替换"
-      clearTimeout(timer)
-      timer = setTimeout(() => {
-        replaceBtn.textContent = "替换"
-      }, 1000)
-    }
-  }
-}
-
-function modifyLink() {
-  const links = $content.value?.querySelectorAll("a") ?? []
-  for (const link of links) {
-    link.target = "_blank"
-  }
-}
-
-async function render() {
-  await getContent()
-  addButton()
-  modifyLink()
-}
-
-async function init() {
-  if (route.query.task) {
-    taskTab.value = route.query.task as TASK_TYPE
-  }
-  if (route.query.step) {
-    step.value = Number(route.query.step)
-  }
-  const query = { task: taskTab.value } as any
-  if (taskTab.value === TASK_TYPE.Tutorial) query.step = step.value
-  router.push({ query })
-  await prepare()
-  render()
 }

 onMounted(init)
-watch(step, (v) => {
-  router.push({ query: { ...route.query, step: v } })
-  render()
-})
 </script>
 <style scoped>
 .container {
@@ -239,65 +131,4 @@ watch(step, (v) => {
  border-bottom: 1px solid rgb(239, 239, 245);
  box-sizing: border-box;
 }
-
-.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;
-}
-
-.codeblock-action {
-  margin-bottom: 1rem;
-  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>
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -10,7 +10,7 @@
        secondary
        :disabled="submitDisabled"
        :loading="submitLoading"
-        @click="submit"
+        @click="emit('submit')"
      >
        提交
      </n-button>
@@ -29,23 +29,21 @@
  </n-flex>
 </template>
 <script lang="ts" setup>
-import { computed, h, ref } from "vue"
-import { useMessage } from "naive-ui"
+import { computed, h } from "vue"
 import { Icon } from "@iconify/vue"
 import { authed, roleNormal, roleSuper, user } from "../store/user"
 import { loginModal } from "../store/modal"
 import { show, tutorialSize, step } from "../store/tutorial"
 import { taskId, taskTab } from "../store/task"
-import { html, css, js } from "../store/editors"
-import { Account, Submission } from "../api"
+import { Account } from "../api"
 import { Role } from "../utils/type"
 import { router } from "../router"
 import { ADMIN_URL, TASK_LABEL } from "../utils/const"

-const message = useMessage()
-const emit = defineEmits(["format"])
-
-const submitLoading = ref(false)
+const props = defineProps<{
+  submitLoading: boolean
+}>()
+const emit = defineEmits(["format", "submit"])

 const submitDisabled = computed(() => {
  return taskId.value === 0
@@ -96,7 +94,7 @@ function showTutorial() {
 function clickMenu(name: string) {
  switch (name) {
    case "dashboard":
-      router.push({ name: "tutorial", params: { display: step.value } })
+      router.push({ name: "tutorial-editor", params: { display: step.value } })
      break
    case "admin":
      window.open(ADMIN_URL)
@@ -123,22 +121,6 @@ async function handleLogout() {
  user.username = ""
  user.role = Role.Normal
 }
-
-async function submit() {
-  try {
-    submitLoading.value = true
-    await Submission.create(taskId.value, {
-      html: html.value,
-      css: css.value,
-      js: js.value,
-    })
-    message.success("提交成功")
-  } catch (err) {
-    message.error("提交失败")
-  } finally {
-    submitLoading.value = false
-  }
-}
 </script>
 <style scoped>
 .corner {
--- a/src/components/Tutorial.vue
+++ b/src/components/Tutorial.vue
@@ -0,0 +1,203 @@
+<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 } from "../store/tutorial"
+import { taskId } from "../store/task"
+import { useRouter } from "vue-router"
+
+const router = useRouter()
+const tutorialIds = ref<number[]>([])
+const content = ref("")
+const $content = useTemplateRef<any>("$content")
+
+const prevDisabled = () => {
+  const i = tutorialIds.value.indexOf(step.value)
+  return i <= 0
+}
+
+const nextDisabled = () => {
+  const i = tutorialIds.value.indexOf(step.value)
+  return i === tutorialIds.value.length - 1
+}
+
+function prev() {
+  const i = tutorialIds.value.indexOf(step.value)
+  step.value = tutorialIds.value[i - 1]
+}
+
+function next() {
+  const i = tutorialIds.value.indexOf(step.value)
+  step.value = tutorialIds.value[i + 1]
+}
+
+defineExpose({ tutorialIds, prevDisabled, nextDisabled, prev, next })
+
+async function prepare() {
+  tutorialIds.value = await Tutorial.listDisplay()
+  if (!tutorialIds.value.length) {
+    content.value = "暂无教程"
+  }
+  if (!tutorialIds.value.includes(step.value)) {
+    step.value = tutorialIds.value[0]
+  }
+}
+
+async function getContent() {
+  const data = await Tutorial.get(step.value)
+  taskId.value = data.task_ptr
+  const merged = `# #${data.display} ${data.title}\n${data.content}`
+  content.value = await marked.parse(merged, { async: true })
+}
+
+function addButton() {
+  const action = document.createElement("div")
+  action.className = "codeblock-action"
+  const pres = $content.value?.querySelectorAll("pre") ?? []
+  for (const pre of pres) {
+    let timer = 0
+    let copyTimer = 0
+    const actions = action.cloneNode() as HTMLDivElement
+    pre.insertBefore(actions, pre.children[0])
+    const $code = pre.childNodes[1] as HTMLPreElement
+    const match = $code.className.match(/-(.*)/)
+    let lang = "html"
+    if (match) lang = match[1].toLowerCase()
+
+    const langSpan = document.createElement("span")
+    langSpan.className = "lang"
+    langSpan.textContent = lang.toUpperCase()
+
+    const btnGroup = document.createElement("div")
+    btnGroup.className = "btn-group"
+
+    const copyBtn = document.createElement("button")
+    copyBtn.className = "action-btn"
+    copyBtn.textContent = "复制"
+
+    const replaceBtn = document.createElement("button")
+    replaceBtn.className = "action-btn"
+    replaceBtn.textContent = "替换"
+
+    btnGroup.appendChild(copyBtn)
+    btnGroup.appendChild(replaceBtn)
+
+    actions.appendChild(langSpan)
+    actions.appendChild(btnGroup)
+
+    copyBtn.onclick = () => {
+      const content = pre.children[1].textContent
+      copyFn(content ?? "")
+      copyBtn.textContent = "已复制"
+      clearTimeout(copyTimer)
+      copyTimer = setTimeout(() => {
+        copyBtn.textContent = "复制"
+      }, 1000)
+    }
+
+    replaceBtn.onclick = () => {
+      tab.value = lang
+      const content = pre.children[1].textContent
+      if (lang === "html") html.value = content
+      if (lang === "css") css.value = content
+      if (lang === "js") js.value = content
+      replaceBtn.textContent = "已替换"
+      clearTimeout(timer)
+      timer = setTimeout(() => {
+        replaceBtn.textContent = "替换"
+      }, 1000)
+    }
+  }
+}
+
+function modifyLink() {
+  const links = $content.value?.querySelectorAll("a") ?? []
+  for (const link of links) {
+    link.target = "_blank"
+  }
+}
+
+async function render() {
+  await getContent()
+  addButton()
+  modifyLink()
+}
+
+async function init() {
+  await prepare()
+  render()
+}
+
+onMounted(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;
+}
+
+.codeblock-action {
+  margin-bottom: 1rem;
+  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>
--- a/src/components/submissions/NameWithFilter.vue
+++ b/src/components/submissions/NameWithFilter.vue
@@ -1 +0,0 @@
-<template></template>