20260817225227
This commit is contained in:
oneao committed
1 parent
d3acc7d28f
commit
b90ae89b0e
39 files changed
+3861
-353
No files matched your search
@@ -1,5 +1,16 @@
|
||||
<script setup>
|
||||
import { LayoutDashboard } from '@lucide/vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import Button from '@/components/ui/button/button.vue'
|
||||
|
||||
defineOptions({ name: 'Dashboard' })
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 跳转到详情页（不同 id = 不同路由缓存），用于验证「多参数独立缓存」
|
||||
function goDetail(id) {
|
||||
router.push(`/detail/${id}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -8,7 +19,13 @@ import { LayoutDashboard } from '@lucide/vue'
|
||||
<LayoutDashboard />
|
||||
</div>
|
||||
<h1 class="dashboard-title">工作台</h1>
|
||||
<p class="dashboard-desc">布局壳与业务页面正在搭建中，敬请期待。</p>
|
||||
<p class="dashboard-desc">布局壳与业务页面已就绪，点击下方按钮进入详情页验证多参数缓存。</p>
|
||||
|
||||
<div class="dashboard-actions">
|
||||
<Button type="primary" @click="goDetail(1)">打开详情 #1</Button>
|
||||
<Button type="primary" @click="goDetail(2)">打开详情 #2</Button>
|
||||
<Button type="primary" @click="goDetail(3)">打开详情 #3</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -53,4 +70,11 @@ import { LayoutDashboard } from '@lucide/vue'
|
||||
font-size: 14px;
|
||||
color: var(--fms-text-secondary);
|
||||
}
|
||||
|
||||
.dashboard-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,11 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import ThemeToggle from '@/components/ui/ThemeToggle.vue'
|
||||
import ColorThemePicker from '@/components/ui/ColorThemePicker.vue'
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
defineOptions({ name: 'Demo' })
|
||||
import { Check, Moon, Sun } from '@lucide/vue'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { PRESETS } from '@/theme/presets'
|
||||
import Button from '@/components/ui/button/button.vue'
|
||||
import ButtonDemo from '@/components/ui/demo/button.vue'
|
||||
import ButtonGroupDemo from '@/components/ui/demo/button-group.vue'
|
||||
import TabsDemo from '@/components/ui/demo/tabs.vue'
|
||||
@@ -27,6 +31,18 @@ import TagDemo from '@/components/ui/demo/tag.vue'
|
||||
import TreeDemo from '@/components/ui/demo/tree.vue'
|
||||
|
||||
/* ---------- 导航分类 ---------- */
|
||||
const appStore = useAppStore()
|
||||
const isDark = computed(() => appStore.darkMode)
|
||||
function toggleDark() {
|
||||
appStore.toggleDark()
|
||||
}
|
||||
|
||||
/* 主色选择：原 ColorThemePicker 组件逻辑内联 */
|
||||
const activeColor = computed(() => appStore.primaryColor)
|
||||
function pickColor(color) {
|
||||
appStore.setPrimary(color)
|
||||
}
|
||||
|
||||
const activeKey = ref('button')
|
||||
|
||||
const categories = [
|
||||
@@ -112,8 +128,29 @@ const demoMap = {
|
||||
</div>
|
||||
|
||||
<div class="theme-controls">
|
||||
<ColorThemePicker />
|
||||
<ThemeToggle />
|
||||
<div class="color-picker" role="group" aria-label="主题色">
|
||||
<button
|
||||
v-for="preset in PRESETS"
|
||||
:key="preset.color"
|
||||
class="swatch"
|
||||
type="button"
|
||||
:style="{ background: preset.color }"
|
||||
:aria-label="preset.name"
|
||||
:title="preset.name"
|
||||
:aria-pressed="activeColor === preset.color"
|
||||
@click="pickColor(preset.color)"
|
||||
>
|
||||
<Check v-if="activeColor === preset.color" class="check" />
|
||||
</button>
|
||||
</div>
|
||||
<Button
|
||||
type="ghost"
|
||||
class="theme-toggle-btn"
|
||||
:title="isDark ? '浅色模式' : '深色模式'"
|
||||
@click="toggleDark"
|
||||
>
|
||||
<component :is="isDark ? Moon : Sun" />
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -179,6 +216,75 @@ const demoMap = {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.theme-toggle-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: var(--fms-control-radius);
|
||||
background: transparent;
|
||||
color: var(--fms-text);
|
||||
cursor: pointer;
|
||||
transition: background-color 150ms ease;
|
||||
}
|
||||
|
||||
.theme-toggle-btn:hover {
|
||||
background: var(--fms-secondary-hover);
|
||||
}
|
||||
|
||||
.theme-toggle-btn:focus-visible {
|
||||
outline: 2px solid var(--fms-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.theme-toggle-btn svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/* 色板（原 ColorThemePicker 组件内联） */
|
||||
.color-picker {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.swatch {
|
||||
position: relative;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 1px;
|
||||
transition:
|
||||
outline-color 120ms ease,
|
||||
transform 120ms ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline-color: var(--fms-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.check {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
margin: auto;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.app-body {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
@@ -0,0 +1,129 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
/** 详情 id（由路由参数经工厂注入，保证每个 fullPath 拿到自己的 id） */
|
||||
id: { type: [String, Number], default: '' },
|
||||
})
|
||||
|
||||
// 下面这个输入框用于验证「缓存按 fullPath 隔离」：
|
||||
// 在同一参数页输入内容后切换/关闭再回来，值应保留；不同参数之间互不影响。
|
||||
const draft = ref('')
|
||||
const counter = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="detail-page">
|
||||
<h1 class="detail-title">详情页 #{{ id }}</h1>
|
||||
<p class="detail-sub">
|
||||
当前路由：<code>{{ $route.fullPath }}</code>
|
||||
</p>
|
||||
|
||||
<div class="detail-card">
|
||||
<p class="detail-hint">
|
||||
本页每个 <code>id</code> 是<strong>独立缓存</strong>：切换 / 关闭后再回到相同
|
||||
<code>id</code>，下方输入内容与计数会保留；不同 <code>id</code> 之间互不影响。
|
||||
</p>
|
||||
|
||||
<label class="detail-field">
|
||||
<span>测试输入（验证缓存隔离）</span>
|
||||
<input v-model="draft" class="detail-input" placeholder="输入点什么，再切换页签回来看看" />
|
||||
</label>
|
||||
|
||||
<div class="detail-row">
|
||||
<Button type="primary" @click="counter += 1">计数 +1（当前 {{ counter }}）</Button>
|
||||
<span class="detail-tip">关闭本页签再重开，计数归零说明缓存已销毁；保留说明命中缓存。</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
color: var(--fms-text);
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.detail-sub {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: var(--fms-text-secondary);
|
||||
|
||||
code {
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
background: var(--fms-secondary-hover);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--fms-border);
|
||||
border-radius: var(--fms-control-radius);
|
||||
background: var(--fms-card);
|
||||
}
|
||||
|
||||
.detail-hint {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
color: var(--fms-text-secondary);
|
||||
|
||||
code {
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
background: var(--fms-secondary-hover);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--fms-text-secondary);
|
||||
}
|
||||
|
||||
.detail-input {
|
||||
width: 320px;
|
||||
max-width: 100%;
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--fms-border);
|
||||
border-radius: var(--fms-control-radius);
|
||||
background: var(--fms-background);
|
||||
color: var(--fms-text);
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid var(--fms-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.detail-tip {
|
||||
font-size: 12px;
|
||||
color: var(--fms-text-secondary);
|
||||
}
|
||||
</style>
|
||||
@@ -94,13 +94,23 @@ function onFailed() {
|
||||
@submit-failed="onFailed"
|
||||
>
|
||||
<FormItem name="orgId" label="机构码">
|
||||
<Input id="orgId" v-model="formModel.orgId" placeholder="请输入机构码" :disabled="submitting">
|
||||
<Input
|
||||
id="orgId"
|
||||
v-model="formModel.orgId"
|
||||
placeholder="请输入机构码"
|
||||
:disabled="submitting"
|
||||
>
|
||||
<template #prefix><Building2 /></template>
|
||||
</Input>
|
||||
</FormItem>
|
||||
|
||||
<FormItem name="userId" label="账号">
|
||||
<Input id="userId" v-model="formModel.userId" placeholder="请输入账号" :disabled="submitting">
|
||||
<Input
|
||||
id="userId"
|
||||
v-model="formModel.userId"
|
||||
placeholder="请输入账号"
|
||||
:disabled="submitting"
|
||||
>
|
||||
<template #prefix><User /></template>
|
||||
</Input>
|
||||
</FormItem>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
defineOptions({ name: 'TestPage' })
|
||||
import Button from '@/components/ui/button/button.vue'
|
||||
|
||||
const route = useRoute()
|
||||
@@ -19,8 +21,12 @@ const index = computed(() => Number(route.params.id ?? 0))
|
||||
<div class="fms-test-page__body">
|
||||
<div class="fms-test-page__card">
|
||||
<p>这是用于测试 Tabs 导航的占位页面。</p>
|
||||
<p>当前路由：<code>{{ route.fullPath }}</code></p>
|
||||
<p>页签索引：<strong>{{ index }}</strong></p>
|
||||
<p>
|
||||
当前路由：<code>{{ route.fullPath }}</code>
|
||||
</p>
|
||||
<p>
|
||||
页签索引：<strong>{{ index }}</strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="fms-test-page__actions">
|
||||
|
||||
Reference in new issue
Block a user