diff --git a/frontend/admin/index.html b/frontend/admin/index.html
new file mode 100644
index 0000000..ad457f0
--- /dev/null
+++ b/frontend/admin/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>KF 管理控制台</title>
+  </head>
+  <body>
+    <div id="admin-app"></div>
+    <script type="module" src="/src/admin/main.ts"></script>
+  </body>
+</html>
diff --git a/frontend/src/admin/AdminApp.vue b/frontend/src/admin/AdminApp.vue
new file mode 100644
index 0000000..3c81b9f
--- /dev/null
+++ b/frontend/src/admin/AdminApp.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import UiIcon from '../components/UiIcon.vue'
+import { adminSections } from './navigation'
+const route = useRoute()
+</script>
+<template>
+  <el-config-provider :locale="zhCn">
+    <div class="admin-application">
+      <header class="admin-app-header">
+        <a href="/admin/index.html" class="brand"
+          ><span class="brand-mark">KF.</span
+          ><span class="brand-name">管理控制台<small>ADMIN CONSOLE</small></span></a
+        >
+        <span class="admin-app-label">独立管理应用 · 界面预览</span>
+        <a href="/" class="admin-return">返回前台 <UiIcon name="arrow" /></a>
+      </header>
+      <nav class="admin-app-nav" aria-label="管理导航">
+        <RouterLink
+          v-for="section in adminSections"
+          :key="section.id"
+          :to="section.id === 'overview' ? '/' : '/' + section.id"
+          :aria-label="section.title"
+          :class="{ active: (route.params.section || 'overview') === section.id }"
+          ><UiIcon :name="section.icon" /><span>{{ section.title }}</span></RouterLink
+        >
+      </nav>
+      <main class="admin-app-main">
+        <RouterView v-slot="{ Component, route: currentRoute }"
+          ><component :is="Component" :key="currentRoute.path"
+        /></RouterView>
+      </main>
+      <footer class="admin-app-footer">
+        KF OnlineJudge / 管理控制台<span>示例数据 · 管理员授权与业务接口待接入</span>
+      </footer>
+    </div>
+  </el-config-provider>
+</template>
diff --git a/frontend/src/admin/AdminView.vue b/frontend/src/admin/AdminView.vue
new file mode 100644
index 0000000..c6535b7
--- /dev/null
+++ b/frontend/src/admin/AdminView.vue
@@ -0,0 +1,272 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { problems, contests, rankings } from '../data/preview'
+import PageHeading from '../components/PageHeading.vue'
+import PanelCard from '../components/PanelCard.vue'
+import SubmissionChart from '../components/SubmissionChart.vue'
+import EmptyState from '../components/EmptyState.vue'
+import { adminSections as sections } from './navigation'
+const route = useRoute()
+const section = computed(() => String(route.params.section || 'overview'))
+const current = computed(() => sections.find((s) => s.id === section.value))
+const query = ref('')
+const problemItems = computed(() => problems.filter((p) => (p.id + p.title).includes(query.value)))
+const contestItems = computed(() => contests.filter((c) => c.title.includes(query.value)))
+const userItems = computed(() =>
+  rankings.filter((u) => u.username.toLowerCase().includes(query.value.toLowerCase())),
+)
+const editOpen = ref(false)
+const draft = reactive({ id: '', title: '', difficulty: '入门', status: '公开' })
+const settings = reactive({
+  name: 'KF OnlineJudge',
+  slogan: '每一次提交，都有新的收获。',
+  registration: true,
+  announcement: '欢迎来到 KF OnlineJudge',
+  filing: '',
+})
+const nodes = [
+  {
+    name: 'home-worker-01',
+    host: 'Debian',
+    capacity: '4 核 / 8 GB',
+    status: '在线',
+    load: 32,
+    tasks: 2,
+  },
+  {
+    name: 'cloud-worker-01',
+    host: 'Ubuntu',
+    capacity: '8 核 / 8 GB',
+    status: '在线',
+    load: 46,
+    tasks: 4,
+  },
+  {
+    name: 'cloud-worker-02',
+    host: 'Ubuntu',
+    capacity: '2 核 / 2 GB',
+    status: '离线',
+    load: 0,
+    tasks: 0,
+  },
+]
+function editProblem(id?: string) {
+  const row = problems.find((problem) => problem.id === id)
+  Object.assign(draft, {
+    id: row?.id ?? '',
+    title: row?.title ?? '',
+    difficulty: row?.difficulty ?? '入门',
+    status: '公开',
+  })
+  editOpen.value = true
+}
+</script>
+<template>
+  <PageHeading
+    title="管理中心"
+    eyebrow="ADMINISTRATION"
+    description="管理界面预览 · 管理员身份与写入接口待接入。"
+    ><a href="/"><el-button>返回站点</el-button></a></PageHeading
+  >
+  <div class="admin-shell">
+    <div v-if="current" class="stack">
+      <template v-if="section === 'overview'"
+        ><div class="summary-grid">
+          <div class="summary-card">
+            <p>公开题目</p>
+            <strong>248</strong><small>示例统计</small>
+          </div>
+          <div class="summary-card">
+            <p>累计提交</p>
+            <strong>18,240</strong><small>示例统计</small>
+          </div>
+          <div class="summary-card">
+            <p>注册用户</p>
+            <strong>328</strong><small>示例统计</small>
+          </div>
+          <div class="summary-card">
+            <p>在线节点</p>
+            <strong>2 / 3</strong><small>示例统计</small>
+          </div>
+        </div>
+        <PanelCard title="提交趋势" icon="rankings"><SubmissionChart /></PanelCard
+        ><PanelCard title="开发接入状态" icon="connection"
+          ><el-descriptions :column="1" border
+            ><el-descriptions-item label="当前界面">前端预览</el-descriptions-item
+            ><el-descriptions-item label="账号与权限">待接入</el-descriptions-item
+            ><el-descriptions-item label="评测与节点状态">待接入</el-descriptions-item
+            ><el-descriptions-item label="管理写入与操作审计"
+              >待接入</el-descriptions-item
+            ></el-descriptions
+          ></PanelCard
+        ></template
+      >
+      <PanelCard
+        v-else-if="section === 'problems'"
+        title="题目管理"
+        icon="problems"
+        subtitle="示例题库"
+        ><template #actions
+          ><el-button size="small" type="primary" @click="editProblem()"
+            >新建题目草稿</el-button
+          ></template
+        >
+        <div class="filters">
+          <el-input
+            v-model="query"
+            placeholder="搜索题号或名称"
+            aria-label="搜索管理题目"
+            clearable
+          />
+        </div>
+        <el-table :data="problemItems" stripe
+          ><el-table-column label="题号" prop="id" width="80" /><el-table-column
+            label="名称"
+            prop="title"
+            min-width="190"
+          /><el-table-column label="难度" prop="difficulty" width="90" /><el-table-column
+            label="更新日期"
+            prop="updated"
+            width="130"
+          /><el-table-column label="操作" width="150"
+            ><template #default="{ row }"
+              ><el-button link type="primary" @click="editProblem(row.id)">编辑预览</el-button
+              ><a :href="'/problems/' + row.id" class="text-link" style="margin-left: 10px"
+                >查看</a
+              ></template
+            ></el-table-column
+          ></el-table
+        ></PanelCard
+      >
+      <PanelCard
+        v-else-if="section === 'contests'"
+        title="比赛管理"
+        icon="contests"
+        subtitle="示例赛程"
+        ><template #actions
+          ><el-button size="small" type="primary" disabled>创建比赛</el-button></template
+        >
+        <div class="filters">
+          <el-input v-model="query" placeholder="搜索比赛" aria-label="搜索管理比赛" clearable />
+        </div>
+        <el-table :data="contestItems" stripe
+          ><el-table-column label="比赛名称" prop="title" min-width="220" /><el-table-column
+            label="赛制"
+            prop="type"
+            width="75"
+          /><el-table-column label="状态" prop="status" width="120" /><el-table-column
+            label="开始时间"
+            prop="start"
+            min-width="165"
+          /><el-table-column label="操作" width="90"
+            ><template #default="{ row }"
+              ><a class="text-link" :href="'/contests/' + row.id">查看</a></template
+            ></el-table-column
+          ></el-table
+        ></PanelCard
+      >
+      <PanelCard v-else-if="section === 'users'" title="用户管理" icon="teams" subtitle="示例用户"
+        ><div class="filters">
+          <el-input v-model="query" placeholder="搜索用户名" aria-label="搜索管理用户" clearable />
+        </div>
+        <el-table :data="userItems" stripe
+          ><el-table-column label="用户名" prop="username" min-width="170" /><el-table-column
+            label="通过题目"
+            prop="solved"
+            width="100"
+          /><el-table-column label="竞赛积分" prop="rating" width="110" /><el-table-column
+            label="角色"
+            width="90"
+            ><template #default>用户</template></el-table-column
+          ><el-table-column label="操作" width="160"
+            ><template #default="{ row }"
+              ><a class="text-link" :href="'/users/' + row.username">查看主页</a
+              ><el-button link disabled style="margin-left: 12px">修改角色</el-button></template
+            ></el-table-column
+          ></el-table
+        ></PanelCard
+      >
+      <PanelCard
+        v-else-if="section === 'judges'"
+        title="判题节点"
+        icon="connection"
+        subtitle="示例监控数据"
+        ><p class="notice-strip">实际节点、负载、心跳和任务状态将在协调器接口接入后展示。</p>
+        <el-table :data="nodes" stripe
+          ><el-table-column label="节点" prop="name" min-width="170" /><el-table-column
+            label="系统"
+            prop="host"
+            width="100"
+          /><el-table-column label="资源" prop="capacity" min-width="135" /><el-table-column
+            label="状态"
+            width="90"
+            ><template #default="{ row }"
+              ><span class="status-dot" :class="{ offline: row.status === '离线' }" />{{
+                row.status
+              }}</template
+            ></el-table-column
+          ><el-table-column label="负载" min-width="140"
+            ><template #default="{ row }"
+              ><el-progress :percentage="row.load" :stroke-width="5" /></template></el-table-column
+          ><el-table-column label="任务" prop="tasks" width="70" /><el-table-column
+            label="操作"
+            width="100"
+            ><template #default
+              ><el-button link disabled>暂停接单</el-button></template
+            ></el-table-column
+          ></el-table
+        >
+        <div class="comment-placeholder">
+          队列积压、租约过期、重试记录与故障恢复操作待接入。
+        </div></PanelCard
+      >
+      <PanelCard v-else-if="section === 'settings'" title="站点设置" icon="settings"
+        ><el-form label-position="top" style="max-width: 700px" @submit.prevent
+          ><el-form-item label="站点名称"><el-input v-model="settings.name" /></el-form-item
+          ><el-form-item label="站点标语"><el-input v-model="settings.slogan" /></el-form-item
+          ><el-form-item label="首页公告"
+            ><el-input v-model="settings.announcement" type="textarea" :rows="3" /></el-form-item
+          ><el-form-item label="备案信息"
+            ><el-input
+              v-model="settings.filing"
+              placeholder="上线前填写真实备案信息" /></el-form-item
+          ><el-form-item label="允许注册"
+            ><el-switch v-model="settings.registration"
+          /></el-form-item>
+          <div class="form-actions">
+            <el-button type="primary" disabled>保存设置</el-button
+            ><span class="muted">当前编辑只在本页面预览</span>
+          </div></el-form
+        ></PanelCard
+      >
+    </div>
+    <EmptyState v-else title="管理页面不存在" />
+  </div>
+  <el-dialog
+    v-model="editOpen"
+    :title="draft.id ? '编辑题目 · ' + draft.id : '新建题目草稿'"
+    width="min(600px, 92vw)"
+    ><el-form label-position="top"
+      ><el-form-item label="题目名称"
+        ><el-input v-model="draft.title" placeholder="填写题目名称" /></el-form-item
+      ><el-form-item label="难度"
+        ><el-select v-model="draft.difficulty"
+          ><el-option
+            v-for="d in ['入门', '简单', '中等', '困难']"
+            :key="d"
+            :label="d"
+            :value="d" /></el-select></el-form-item
+      ><el-form-item label="发布状态"
+        ><el-radio-group v-model="draft.status"
+          ><el-radio value="公开">公开</el-radio
+          ><el-radio value="草稿">草稿</el-radio></el-radio-group
+        ></el-form-item
+      >
+      <p class="small muted">题面编辑、测试数据和版本发布将在题库接口接入后启用。</p></el-form
+    ><template #footer
+      ><el-button @click="editOpen = false">关闭预览</el-button
+      ><el-button type="primary" disabled>保存题目</el-button></template
+    ></el-dialog
+  >
+</template>
diff --git a/frontend/src/admin/main.ts b/frontend/src/admin/main.ts
new file mode 100644
index 0000000..49dfc10
--- /dev/null
+++ b/frontend/src/admin/main.ts
@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import { registerUi } from '../plugins/ui'
+import { adminRouter } from './router'
+import AdminApp from './AdminApp.vue'
+import '../styles/base.css'
+import '../styles/blueprint.css'
+
+const app = createApp(AdminApp)
+registerUi(app)
+app.use(adminRouter).mount('#admin-app')
diff --git a/frontend/src/admin/navigation.ts b/frontend/src/admin/navigation.ts
new file mode 100644
index 0000000..9d70ebf
--- /dev/null
+++ b/frontend/src/admin/navigation.ts
@@ -0,0 +1,8 @@
+export const adminSections = [
+  { id: 'overview', title: '概览', icon: 'monitor' },
+  { id: 'problems', title: '题目管理', icon: 'problems' },
+  { id: 'contests', title: '比赛管理', icon: 'contests' },
+  { id: 'users', title: '用户管理', icon: 'teams' },
+  { id: 'judges', title: '判题节点', icon: 'connection' },
+  { id: 'settings', title: '站点设置', icon: 'settings' },
+]
diff --git a/frontend/src/admin/router.ts b/frontend/src/admin/router.ts
new file mode 100644
index 0000000..eac06de
--- /dev/null
+++ b/frontend/src/admin/router.ts
@@ -0,0 +1,12 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import { adminSections } from './navigation'
+
+export const adminRouter = createRouter({
+  history: createWebHashHistory('/admin/index.html'),
+  scrollBehavior: () => ({ top: 0 }),
+  routes: [{ path: '/:section?', component: () => import('./AdminView.vue') }],
+})
+adminRouter.afterEach((to) => {
+  const section = adminSections.find((item) => item.id === (to.params.section || 'overview'))
+  document.title = `${section?.title ?? '页面不存在'} · KF 管理控制台`
+})
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index cacb854..a5b61e3 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,10 +1,19 @@
 import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { fileURLToPath, URL } from 'node:url'
 
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '')
   return {
     plugins: [vue()],
+    build: {
+      rollupOptions: {
+        input: {
+          main: fileURLToPath(new URL('./index.html', import.meta.url)),
+          admin: fileURLToPath(new URL('./admin/index.html', import.meta.url)),
+        },
+      },
+    },
     server: {
       port: 5173,
       strictPort: true,