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>
|
||||
Reference in New Issue
Block a user