u
This commit is contained in:
oneao committed
1 parent
208f6e3124
commit
8f4c696bdd
23 files changed
+1060
-330
No files matched your search
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "@ao/ao-design",
|
||||
"version": "1.0.0",
|
||||
"exports": {
|
||||
".": "./src/index.ts",
|
||||
"./styles": "./src/_styles/index.scss"
|
||||
},
|
||||
"typesVersions": {
|
||||
"*": {
|
||||
"*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@iconify/vue": "^2.1.0",
|
||||
"vue": "^3.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
},
|
||||
"devDependencies": {
|
||||
"sass": "^1.90.0",
|
||||
"typescript": "^5.1.6",
|
||||
"vue": "^3.3.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
@import './theme';
|
||||
@import '../button/index.scss';
|
||||
|
||||
@prefix: 'my-prefix';
|
||||
@@ -0,0 +1,8 @@
|
||||
/* 主题色 */
|
||||
$primary-color: #007bff;
|
||||
$secondary-color: #6c757d;
|
||||
$success-color: #28a745;
|
||||
$warning-color: #ffc107;
|
||||
$danger-color: #dc3545;
|
||||
$light-color: #f8f9fa;
|
||||
$dark-color: #343a40;
|
||||
@@ -0,0 +1,95 @@
|
||||
/* 基本按钮样式 */
|
||||
.btn {
|
||||
height: 40px; /* 增大按钮高度 */
|
||||
padding: 0 24px; /* 左右内边距增加 */
|
||||
font-size: 14px;
|
||||
font-weight: 500; /* 加粗字体 */
|
||||
border-radius: 6px; /* 增大圆角 */
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease; /* 平滑过渡效果 */
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 默认阴影效果 */
|
||||
}
|
||||
|
||||
/* 主色按钮 */
|
||||
.btn-primary {
|
||||
background: $primary-color; /* 使用主题色 */
|
||||
color: #fff;
|
||||
border: 1px solid $primary-color; /* 与背景颜色一致的边框 */
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: darken($primary-color, 10%); /* 悬停效果 */
|
||||
border-color: darken($primary-color, 10%);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 悬停时阴影加重 */
|
||||
}
|
||||
|
||||
/* 辅助色按钮 */
|
||||
.btn-secondary {
|
||||
background: $secondary-color; /* 使用辅助色 */
|
||||
color: #fff;
|
||||
border: 1px solid $secondary-color; /* 边框颜色 */
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: darken($secondary-color, 10%);
|
||||
border-color: darken($secondary-color, 10%);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 悬停时阴影加重 */
|
||||
}
|
||||
|
||||
/* 成功色按钮 */
|
||||
.btn-success {
|
||||
background: $success-color; /* 成功色 */
|
||||
color: #fff;
|
||||
border: 1px solid $success-color; /* 边框颜色 */
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background: darken($success-color, 10%);
|
||||
border-color: darken($success-color, 10%);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 悬停时阴影加重 */
|
||||
}
|
||||
|
||||
/* 警告色按钮 */
|
||||
.btn-warning {
|
||||
background: $warning-color; /* 警告色 */
|
||||
color: #fff;
|
||||
border: 1px solid $warning-color; /* 边框颜色 */
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
background: darken($warning-color, 10%);
|
||||
border-color: darken($warning-color, 10%);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 悬停时阴影加重 */
|
||||
}
|
||||
|
||||
/* 危险色按钮 */
|
||||
.btn-danger {
|
||||
background: $danger-color; /* 危险色 */
|
||||
color: #fff;
|
||||
border: 1px solid $danger-color; /* 边框颜色 */
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: darken($danger-color, 10%);
|
||||
border-color: darken($danger-color, 10%);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 悬停时阴影加重 */
|
||||
}
|
||||
|
||||
/* 链接按钮 */
|
||||
.btn-link {
|
||||
background: transparent;
|
||||
color: $primary-color;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import type { PropType } from 'vue'
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Button',
|
||||
props: {
|
||||
type: {
|
||||
type: String as PropType<'primary' | 'secondary' | 'danger' | 'link'>,
|
||||
default: 'primary',
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup(props, { slots }) {
|
||||
const baseClass = 'btn'
|
||||
const typeClass = `btn-${props.type}`
|
||||
|
||||
return () => (
|
||||
<button class={`${baseClass} ${typeClass}`} disabled={props.disabled}>
|
||||
{slots.default?.()}
|
||||
</button>
|
||||
)
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,3 @@
|
||||
export { default as Button } from './button'
|
||||
export { default as Icon } from './icon'
|
||||
export { default as Input } from './input'
|
||||
@@ -0,0 +1,23 @@
|
||||
import type { PropType } from 'vue'
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'AIcon',
|
||||
props: {
|
||||
icon: { type: String as PropType<string>, required: true },
|
||||
width: { type: String, default: '24px' },
|
||||
height: { type: String, default: '24px' },
|
||||
color: { type: String, default: 'currentColor' }, // 默认颜色使用 currentColor，支持继承父元素的颜色
|
||||
},
|
||||
setup(props) {
|
||||
return () => (
|
||||
<Icon
|
||||
icon={props.icon}
|
||||
width={props.width}
|
||||
height={props.height}
|
||||
style={{ color: props.color, verticalAlign: 'middle' }}
|
||||
/>
|
||||
)
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,41 @@
|
||||
import type { App, Component } from 'vue'
|
||||
// components/index.ts（修改后）
|
||||
|
||||
import * as comps from './components'
|
||||
|
||||
// 按需导出组件（可单独 import）
|
||||
export * from './components'
|
||||
|
||||
// 收集所有组件
|
||||
const allComponents = Object.values(comps).filter(
|
||||
(c: any) => c && c.name,
|
||||
) as Component[]
|
||||
|
||||
export interface AoDesignOptions {
|
||||
prefix?: string
|
||||
components?: Component[] // 按需注册时传入需要注册的组件
|
||||
}
|
||||
|
||||
const AoDesign = {
|
||||
install(app: App, options: AoDesignOptions = {}) {
|
||||
const prefix = options?.prefix ?? 'A'
|
||||
// 如果用户指定了 components，则只注册这些，否则注册全部
|
||||
const componentsToRegister = options?.components || allComponents
|
||||
|
||||
componentsToRegister.forEach((component: any) => {
|
||||
if (!component?.name)
|
||||
return
|
||||
|
||||
const name = `${prefix}${component.name}`
|
||||
|
||||
app.component(name, component)
|
||||
// 注册 kebab-case
|
||||
app.component(
|
||||
name.replace(/([A-Z])/g, '-$1').toLowerCase().replace(/^-/, ''),
|
||||
component,
|
||||
)
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
export default AoDesign
|
||||
@@ -0,0 +1,64 @@
|
||||
import type { PropType } from 'vue'
|
||||
import { computed, defineComponent, ref, toRefs } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Input',
|
||||
props: {
|
||||
modelValue: { type: String, default: '' },
|
||||
placeholder: { type: String, default: '' },
|
||||
type: { type: String as PropType<'text' | 'password' | 'number'>, default: 'text' },
|
||||
disabled: { type: Boolean, default: false },
|
||||
clearable: { type: Boolean, default: false },
|
||||
},
|
||||
emits: ['update:modelValue', 'change', 'focus', 'blur'],
|
||||
setup(props, { emit }) {
|
||||
const inputRef = ref<HTMLInputElement | null>(null)
|
||||
|
||||
const handleInput = (e: Event) => {
|
||||
const value = (e.target as HTMLInputElement).value
|
||||
emit('update:modelValue', value)
|
||||
emit('change', value)
|
||||
}
|
||||
|
||||
const handleClear = () => {
|
||||
emit('update:modelValue', '')
|
||||
inputRef.value?.focus()
|
||||
emit('change', '')
|
||||
}
|
||||
|
||||
const showClear = computed(() => props.clearable && !!props.modelValue && !props.disabled)
|
||||
|
||||
return () => (
|
||||
<div class="a-input-wrapper" style={{ position: 'relative', display: 'inline-block' }}>
|
||||
<input
|
||||
ref={inputRef}
|
||||
class="a-input"
|
||||
type={props.type}
|
||||
placeholder={props.placeholder}
|
||||
value={props.modelValue}
|
||||
disabled={props.disabled}
|
||||
onInput={handleInput}
|
||||
onFocus={e => emit('focus', e)}
|
||||
onBlur={e => emit('blur', e)}
|
||||
style={{ paddingRight: showClear.value ? '24px' : '8px' }}
|
||||
/>
|
||||
{showClear.value && (
|
||||
<span
|
||||
class="a-input-clear"
|
||||
onClick={handleClear}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '4px',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
cursor: 'pointer',
|
||||
fontSize: '12px',
|
||||
}}
|
||||
>
|
||||
×
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "vue",
|
||||
"lib": ["DOM", "ESNext"],
|
||||
"baseUrl": ".",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"types": ["node"],
|
||||
"strict": true,
|
||||
"strictNullChecks": true,
|
||||
"noUnusedLocals": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
Reference in new issue
Block a user