u

code/base-project/base-vue/packages/ao-design/src/_styles/index.scss

@@ -0,0 +1,4 @@
+@import './theme';
+@import '../button/index.scss';
+
+@prefix: 'my-prefix';

code/base-project/base-vue/packages/ao-design/src/_styles/theme.scss

@@ -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;

code/base-project/base-vue/packages/ao-design/src/button/index.scss

@@ -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;
+}

code/base-project/base-vue/packages/ao-design/src/button/index.tsx

@@ -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>
+    )
+  },
+})

code/base-project/base-vue/packages/ao-design/src/components.ts

@@ -0,0 +1,3 @@
+export { default as Button } from './button'
+export { default as Icon } from './icon'
+export { default as Input } from './input'

code/base-project/base-vue/packages/ao-design/src/icon/index.tsx

@@ -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' }}
+      />
+    )
+  },
+})

code/base-project/base-vue/packages/ao-design/src/index.ts

@@ -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

code/base-project/base-vue/packages/ao-design/src/input/index.tsx

@@ -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>
+    )
+  },
+})