chengma/cmbone
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add main app route skeleton

Browse Source
This commit is contained in:
QiuSW
2026-07-08 23:06:48 +08:00
parent 4c1de99d65
commit 811a9c889f
16 changed files with 849 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/modules/components-demo/ComponentsDemoPage.vue
+95
View File
@@ -0,0 +1,95 @@
<script setup lang="ts">
import { ref } from 'vue'
import ModulePageShell from '../../components/template/ModulePageShell.vue'
const checked = ref(true)
const category = ref('image')
const rows = [
{ name: '输入框', category: 'Form', status: 'Ready' },
{ name: '多选框', category: 'Form', status: 'Ready' },
{ name: '表格', category: 'Data', status: 'Ready' },
]
const summary = [
{ label: '表单控件', value: '4', tone: 'blue' as const },
{ label: '表格', value: '1', tone: 'green' as const },
{ label: '筛选', value: '1', tone: 'amber' as const },
{ label: '状态标签', value: '3', tone: 'violet' as const },
]
</script>
<template>
<ModulePageShell
eyebrow="Components"
title="组件示例"
description="常用业务控件的运行示例，后续按真实模块沉淀组合组件。"
status="路由可访问"
:items="summary"
>
<div class="grid grid-cols-1 gap-4 xl:grid-cols-[360px_1fr]">
<section class="rounded-lg border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
<h2 class="mb-4 text-base font-semibold">
表单
</h2>
<div class="space-y-4">
<label class="block">
<span class="mb-1 block text-sm font-medium">输入框</span>
<input class="h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm dark:border-slate-700 dark:bg-slate-950" value="商品主图" />
</label>
<label class="flex items-center gap-2 text-sm">
<input v-model="checked" class="h-4 w-4 rounded border-slate-300" type="checkbox" />
<span>多选框</span>
</label>
<label class="block">
<span class="mb-1 block text-sm font-medium">下拉框</span>
<select v-model="category" class="h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm dark:border-slate-700 dark:bg-slate-950">
<option value="image">图片任务</option>
<option value="logs">日志查询</option>
<option value="settings">设置项</option>
</select>
</label>
<label class="block">
<span class="mb-1 block text-sm font-medium">多行文本</span>
<textarea class="min-h-[96px] w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-950">用于记录任务备注。</textarea>
</label>
</div>
</section>
<section class="rounded-lg border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900">
<div class="grid grid-cols-1 gap-3 border-b border-slate-200 p-4 dark:border-slate-800 md:grid-cols-[1fr_180px_auto]">
<input class="h-10 rounded-md border border-slate-300 bg-white px-3 text-sm dark:border-slate-700 dark:bg-slate-950" placeholder="筛选关键字" />
<select class="h-10 rounded-md border border-slate-300 bg-white px-3 text-sm dark:border-slate-700 dark:bg-slate-950">
<option>全部分类</option>
<option>Form</option>
<option>Data</option>
</select>
<button class="h-10 rounded-md bg-slate-950 px-4 text-sm font-medium text-white dark:bg-white dark:text-slate-950" type="button">
筛选
</button>
</div>
<div class="overflow-x-auto">
<table class="min-w-full text-left text-sm">
<thead class="bg-slate-50 text-xs uppercase text-slate-500 dark:bg-slate-950 dark:text-slate-400">
<tr>
<th class="px-4 py-3 font-medium">名称</th>
<th class="px-4 py-3 font-medium">分类</th>
<th class="px-4 py-3 font-medium">状态</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-200 dark:divide-slate-800">
<tr v-for="row in rows" :key="row.name">
<td class="px-4 py-3">{{ row.name }}</td>
<td class="px-4 py-3">{{ row.category }}</td>
<td class="px-4 py-3">
<span class="rounded-md bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-200">
{{ row.status }}
</span>
</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</ModulePageShell>
</template>