chore: 添加基础组件、样式文件和项目文档
## 新增文件 - src/components/BaseButton.vue：可复用按钮组件 - src/components/BaseInput.vue：可复用输入框组件 - src/components/BaseModal.vue：可复用模态框组件 - src/styles/：样式文件目录 * components.css：组件样式 * design-tokens.css：设计 token * utilities.css：工具类 - docs/需求解析功能使用指南.md：需求解析功能文档 - docs/req.md：组织生活会对照检查材料需求文档 ## 更新文件 - .gitignore：忽略 MCP 缓存、截图和测试文件 ## 删除文件 - docs/找问题Prompt.md：旧文档 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
empty
58
src/components/BaseButton.vue
Normal file
58
src/components/BaseButton.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<button
|
||||
:class="buttonClasses"
|
||||
:disabled="disabled || loading"
|
||||
@click="handleClick"
|
||||
>
|
||||
<svg v-if="loading" class="spin" width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" stroke-opacity="0.25"/>
|
||||
<path fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
|
||||
</svg>
|
||||
<slot v-else></slot>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
variant: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
validator: (v) => ['primary', 'secondary', 'ghost', 'danger'].includes(v)
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'md',
|
||||
validator: (v) => ['sm', 'md'].includes(v)
|
||||
},
|
||||
disabled: { type: Boolean, default: false },
|
||||
loading: { type: Boolean, default: false }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['click'])
|
||||
|
||||
const buttonClasses = computed(() => {
|
||||
const classes = ['btn']
|
||||
if (props.variant) classes.push(`btn-${props.variant}`)
|
||||
if (props.size === 'sm') classes.push('btn-sm')
|
||||
return classes.join(' ')
|
||||
})
|
||||
|
||||
const handleClick = (e) => {
|
||||
if (!props.disabled && !props.loading) {
|
||||
emit('click', e)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.spin {
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
96
src/components/BaseInput.vue
Normal file
96
src/components/BaseInput.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div class="input-wrapper" :class="{ 'input-wrapper-error': error }">
|
||||
<label v-if="label" class="input-label">
|
||||
{{ label }}
|
||||
<span v-if="required" class="input-required">*</span>
|
||||
</label>
|
||||
<input
|
||||
:id="id"
|
||||
ref="inputRef"
|
||||
:type="type"
|
||||
:class="['input', { 'input-error': error }]"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:value="modelValue"
|
||||
@input="onInput"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
<div v-if="error" class="input-error-text">{{ error }}</div>
|
||||
<div v-else-if="hint" class="input-hint">{{ hint }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
id: { type: String, default: () => `input-${Math.random().toString(36).slice(2, 8)}` },
|
||||
type: { type: String, default: 'text' },
|
||||
modelValue: { type: [String, Number], default: '' },
|
||||
label: { type: String, default: '' },
|
||||
placeholder: { type: String, default: '' },
|
||||
disabled: { type: Boolean, default: false },
|
||||
required: { type: Boolean, default: false },
|
||||
error: { type: String, default: '' },
|
||||
hint: { type: String, default: '' }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
|
||||
|
||||
const inputRef = ref(null)
|
||||
|
||||
const onInput = (e) => {
|
||||
emit('update:modelValue', e.target.value)
|
||||
}
|
||||
|
||||
const onFocus = (e) => {
|
||||
emit('focus', e)
|
||||
}
|
||||
|
||||
const onBlur = (e) => {
|
||||
emit('blur', e)
|
||||
}
|
||||
|
||||
// 暴露 focus 方法
|
||||
defineExpose({
|
||||
focus: () => inputRef.value?.focus()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.input-label {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-medium);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.input-required {
|
||||
color: var(--accent-danger);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.input-error {
|
||||
border-color: var(--accent-danger) !important;
|
||||
}
|
||||
|
||||
.input-error:focus {
|
||||
box-shadow: 0 0 0 3px var(--danger-bg) !important;
|
||||
}
|
||||
|
||||
.input-error-text {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--accent-danger);
|
||||
}
|
||||
|
||||
.input-hint {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
</style>
|
||||
44
src/components/BaseModal.vue
Normal file
44
src/components/BaseModal.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div v-if="show" class="modal-backdrop" @click="onBackdropClick">
|
||||
<div class="modal" :style="{ width, maxHeight }" @click.stop>
|
||||
<header class="modal-header">
|
||||
<h3 class="modal-title">{{ title }}</h3>
|
||||
<button class="btn btn-ghost" @click="onClose" aria-label="关闭">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="modal-body">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<footer v-if="$slots.footer" class="modal-footer">
|
||||
<slot name="footer"></slot>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
show: { type: Boolean, default: false },
|
||||
title: { type: String, default: '' },
|
||||
width: { type: String, default: '560px' },
|
||||
maxHeight: { type: String, default: '85vh' },
|
||||
closeOnBackdrop: { type: Boolean, default: true }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const onBackdropClick = () => {
|
||||
if (props.closeOnBackdrop) emit('close')
|
||||
}
|
||||
|
||||
const onClose = () => emit('close')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 组件样式已由 components.css 提供 */
|
||||
</style>
|
||||
363
src/styles/components.css
Normal file
363
src/styles/components.css
Normal file
@@ -0,0 +1,363 @@
|
||||
/* ========== 基础组件样式库 ========== */
|
||||
|
||||
/* ===== 卡片 ===== */
|
||||
.card {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-5);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-bottom: var(--space-3);
|
||||
margin-bottom: var(--space-4);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ===== 按钮 ===== */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-medium);
|
||||
border-radius: var(--radius-lg);
|
||||
transition: all var(--transition-fast);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn:focus-visible {
|
||||
box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-primary);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent-primary);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--accent-primary-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--bg-sunken);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--accent-danger);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: var(--space-2) var(--space-3);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ===== 输入框 ===== */
|
||||
.input {
|
||||
width: 100%;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
font-size: var(--text-base);
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-lg);
|
||||
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
.input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 0 0 3px var(--info-bg);
|
||||
}
|
||||
|
||||
.input:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ===== 标签/徽章 ===== */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--space-1) var(--space-2);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--font-medium);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.badge-default {
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
background: var(--info-bg);
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background: var(--success-bg);
|
||||
color: var(--accent-success);
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background: var(--warning-bg);
|
||||
color: var(--accent-warning);
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
background: var(--danger-bg);
|
||||
color: var(--accent-danger);
|
||||
}
|
||||
|
||||
/* ===== 进度条 ===== */
|
||||
.progress-track {
|
||||
height: 4px;
|
||||
background: var(--bg-sunken);
|
||||
border-radius: var(--radius-full);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: var(--accent-primary);
|
||||
border-radius: var(--radius-full);
|
||||
transition: width var(--transition-slow);
|
||||
}
|
||||
|
||||
.progress-fill.success { background: var(--accent-success); }
|
||||
.progress-fill.warning { background: var(--accent-warning); }
|
||||
.progress-fill.danger { background: var(--accent-danger); }
|
||||
|
||||
/* ===== 分隔线 ===== */
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--border-default);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.divider-vertical {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: var(--border-default);
|
||||
}
|
||||
|
||||
/* ===== 模态框 ===== */
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: var(--z-modal-backdrop);
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-lg);
|
||||
z-index: var(--z-modal);
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-5);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: var(--text-lg);
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-5);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
/* ===== 标签页 ===== */
|
||||
.tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--border-default);
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: var(--space-3) var(--space-4);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-medium);
|
||||
color: var(--text-secondary);
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -1px;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: var(--accent-primary);
|
||||
border-bottom-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* ===== 工具栏 ===== */
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.toolbar-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.toolbar-divider {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: var(--border-default);
|
||||
margin: 0 var(--space-2);
|
||||
}
|
||||
|
||||
/* ===== 数据指标 ===== */
|
||||
.metric {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: var(--text-xl);
|
||||
font-weight: var(--font-semibold);
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--font-medium);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ===== 列表项 ===== */
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
.list-item:hover {
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.list-item.active {
|
||||
background: var(--info-bg);
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* ===== 视图切换器 ===== */
|
||||
.view-switcher {
|
||||
display: flex;
|
||||
background: var(--bg-elevated);
|
||||
padding: var(--space-1);
|
||||
border-radius: var(--radius-lg);
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.view-switcher button {
|
||||
padding: var(--space-2) var(--space-3);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--font-medium);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-secondary);
|
||||
transition: all var(--transition-fast);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.view-switcher button:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.view-switcher button.active {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--accent-primary);
|
||||
box-shadow: var(--shadow-xs);
|
||||
}
|
||||
98
src/styles/design-tokens.css
Normal file
98
src/styles/design-tokens.css
Normal file
@@ -0,0 +1,98 @@
|
||||
/* ========== 设计令牌系统 - Modern Minimalist ========== */
|
||||
|
||||
/* ===== 深色模式（默认） ===== */
|
||||
:root {
|
||||
/* 背景色 */
|
||||
--bg-primary: #0f172a; /* 页面主背景 */
|
||||
--bg-secondary: #1e293b; /* 卡片/面板背景 */
|
||||
--bg-elevated: #334155; /* 悬浮元素背景 */
|
||||
--bg-sunken: #0f172a; /* 凹陷元素背景 */
|
||||
|
||||
/* 边框色 */
|
||||
--border-default: #334155; /* 默认边框 */
|
||||
--border-subtle: #1e293b; /* 微妙边框 */
|
||||
--border-strong: #475569; /* 强调边框 */
|
||||
--border-focus: #60a5fa; /* 焦点边框 */
|
||||
|
||||
/* 文本色 */
|
||||
--text-primary: #f1f5f9; /* 主要内容 */
|
||||
--text-secondary: #94a3b8; /* 次要内容 */
|
||||
--text-muted: #64748b; /* 禁用/提示文本 */
|
||||
--text-inverse: #0f172a; /* 反色文本 */
|
||||
|
||||
/* 语义色 */
|
||||
--accent-primary: #60a5fa; /* 主操作色 - 蓝色 */
|
||||
--accent-primary-hover: #3b82f6;
|
||||
--accent-success: #34d399; /* 成功 - 绿色 */
|
||||
--accent-warning: #fbbf24; /* 警告 - 黄色 */
|
||||
--accent-danger: #f87171; /* 危险 - 红色 */
|
||||
|
||||
/* 语义背景色（带透明度） */
|
||||
--info-bg: rgba(96, 165, 250, 0.1);
|
||||
--success-bg: rgba(52, 211, 153, 0.1);
|
||||
--warning-bg: rgba(251, 191, 36, 0.1);
|
||||
--danger-bg: rgba(248, 113, 113, 0.1);
|
||||
|
||||
/* 字体 */
|
||||
--font-display: system-ui, -apple-system, sans-serif;
|
||||
--font-body: system-ui, -apple-system, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'SF Mono', Monaco, monospace;
|
||||
|
||||
/* 字号 */
|
||||
--text-xs: 0.6875rem; /* 11px - 标签、提示 */
|
||||
--text-sm: 0.8125rem; /* 13px - 次要内容 */
|
||||
--text-base: 0.9375rem; /* 15px - 正文 */
|
||||
--text-lg: 1.125rem; /* 18px - 小标题 */
|
||||
--text-xl: 1.375rem; /* 22px - 页面标题 */
|
||||
--text-2xl: 1.75rem; /* 28px - 大标题 */
|
||||
|
||||
/* 行高 */
|
||||
--leading-tight: 1.2;
|
||||
--leading-normal: 1.5;
|
||||
--leading-relaxed: 1.625;
|
||||
|
||||
/* 字重 */
|
||||
--font-normal: 400;
|
||||
--font-medium: 500;
|
||||
--font-semibold: 600;
|
||||
--font-bold: 700;
|
||||
|
||||
/* 间距（4px 基础倍数） */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-10: 40px;
|
||||
--space-12: 48px;
|
||||
|
||||
/* 圆角 */
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
--radius-xl: 12px;
|
||||
--radius-2xl: 16px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* 阴影（深色模式更明显） */
|
||||
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
|
||||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||||
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
|
||||
|
||||
/* 过渡 */
|
||||
--transition-fast: 0.15s ease;
|
||||
--transition-normal: 0.2s ease;
|
||||
--transition-slow: 0.3s ease;
|
||||
|
||||
/* Z-index 层级 */
|
||||
--z-dropdown: 1000;
|
||||
--z-sticky: 1020;
|
||||
--z-fixed: 1030;
|
||||
--z-modal-backdrop: 1040;
|
||||
--z-modal: 1050;
|
||||
--z-popover: 1060;
|
||||
--z-tooltip: 1070;
|
||||
}
|
||||
116
src/styles/utilities.css
Normal file
116
src/styles/utilities.css
Normal file
@@ -0,0 +1,116 @@
|
||||
/* ========== 工具类 ========== */
|
||||
|
||||
/* 布局 */
|
||||
.flex { display: flex; }
|
||||
.inline-flex { display: inline-flex; }
|
||||
.grid { display: grid; }
|
||||
.hidden { display: none; }
|
||||
|
||||
.flex-col { flex-direction: column; }
|
||||
.flex-row { flex-direction: row; }
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
|
||||
.items-center { align-items: center; }
|
||||
.items-start { align-items: flex-start; }
|
||||
.items-end { align-items: flex-end; }
|
||||
|
||||
.justify-center { justify-content: center; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.justify-start { justify-content: flex-start; }
|
||||
.justify-end { justify-content: flex-end; }
|
||||
|
||||
.flex-1 { flex: 1; }
|
||||
.flex-shrink-0 { flex-shrink: 0; }
|
||||
|
||||
.gap-1 { gap: var(--space-1); }
|
||||
.gap-2 { gap: var(--space-2); }
|
||||
.gap-3 { gap: var(--space-3); }
|
||||
.gap-4 { gap: var(--space-4); }
|
||||
.gap-6 { gap: var(--space-6); }
|
||||
|
||||
/* 间距 */
|
||||
.p-2 { padding: var(--space-2); }
|
||||
.p-3 { padding: var(--space-3); }
|
||||
.p-4 { padding: var(--space-4); }
|
||||
.p-5 { padding: var(--space-5); }
|
||||
.p-6 { padding: var(--space-6); }
|
||||
|
||||
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
|
||||
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
|
||||
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
|
||||
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
|
||||
|
||||
.m-2 { margin: var(--space-2); }
|
||||
.m-4 { margin: var(--space-4); }
|
||||
.mb-2 { margin-bottom: var(--space-2); }
|
||||
.mb-4 { margin-bottom: var(--space-4); }
|
||||
.mt-2 { margin-top: var(--space-2); }
|
||||
.mt-4 { margin-top: var(--space-4); }
|
||||
|
||||
/* 文本 */
|
||||
.text-xs { font-size: var(--text-xs); }
|
||||
.text-sm { font-size: var(--text-sm); }
|
||||
.text-base { font-size: var(--text-base); }
|
||||
.text-lg { font-size: var(--text-lg); }
|
||||
.text-xl { font-size: var(--text-xl); }
|
||||
|
||||
.font-normal { font-weight: var(--font-normal); }
|
||||
.font-medium { font-weight: var(--font-medium); }
|
||||
.font-semibold { font-weight: var(--font-semibold); }
|
||||
.font-bold { font-weight: var(--font-bold); }
|
||||
|
||||
.text-primary { color: var(--text-primary); }
|
||||
.text-secondary { color: var(--text-secondary); }
|
||||
.text-muted { color: var(--text-muted); }
|
||||
.text-accent { color: var(--accent-primary); }
|
||||
.text-success { color: var(--accent-success); }
|
||||
.text-warning { color: var(--accent-warning); }
|
||||
.text-danger { color: var(--accent-danger); }
|
||||
|
||||
.text-center { text-align: center; }
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
|
||||
/* 背景 */
|
||||
.bg-primary { background: var(--bg-primary); }
|
||||
.bg-secondary { background: var(--bg-secondary); }
|
||||
.bg-elevated { background: var(--bg-elevated); }
|
||||
|
||||
/* 边框 */
|
||||
.border { border: 1px solid var(--border-default); }
|
||||
.border-t { border-top: 1px solid var(--border-default); }
|
||||
.border-b { border-bottom: 1px solid var(--border-default); }
|
||||
.border-l { border-left: 1px solid var(--border-default); }
|
||||
.border-r { border-right: 1px solid var(--border-default); }
|
||||
|
||||
.rounded { border-radius: var(--radius-md); }
|
||||
.rounded-lg { border-radius: var(--radius-lg); }
|
||||
.rounded-xl { border-radius: var(--radius-xl); }
|
||||
.rounded-full { border-radius: var(--radius-full); }
|
||||
|
||||
/* 尺寸 */
|
||||
.w-full { width: 100%; }
|
||||
.h-full { height: 100%; }
|
||||
.min-h-screen { min-height: 100vh; }
|
||||
|
||||
/* 溢出 */
|
||||
.overflow-auto { overflow: auto; }
|
||||
.overflow-hidden { overflow: hidden; }
|
||||
.overflow-y-auto { overflow-y: auto; }
|
||||
|
||||
/* 定位 */
|
||||
.relative { position: relative; }
|
||||
.absolute { position: absolute; }
|
||||
.fixed { position: fixed; }
|
||||
|
||||
/* 光标 */
|
||||
.cursor-pointer { cursor: pointer; }
|
||||
.cursor-not-allowed { cursor: not-allowed; }
|
||||
|
||||
/* 过渡 */
|
||||
.transition { transition: all var(--transition-normal); }
|
||||
.transition-fast { transition: all var(--transition-fast); }
|
||||
|
||||
/* 其他 */
|
||||
.select-none { user-select: none; }
|
||||
.pointer-events-none { pointer-events: none; }
|
||||
Reference in New Issue
Block a user