little-dizzy 1.0.0

package/src/components/Button.vue

@@ -0,0 +1,176 @@
+<template>
+  <button class="btn" :class="[
+    `btn-${type}`,
+    `btn-${size}`,
+    { 'btn-block': block },
+    { 'btn-disabled': disabled }
+  ]" :disabled="disabled" @click="$emit('click', $event)">
+    <slot></slot>
+  </button>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+// 定义组件属性
+const props = defineProps({
+  // 按钮类型
+  type: {
+    type: String,
+    default: 'primary',
+    validator: (value) => {
+      return ['primary', 'success', 'warning', 'danger', 'info', 'secondary'].includes(value)
+    }
+  },
+  // 按钮尺寸
+  size: {
+    type: String,
+    default: 'medium',
+    validator: (value) => {
+      return ['small', 'medium', 'large'].includes(value)
+    }
+  },
+  // 是否为块级按钮
+  block: {
+    type: Boolean,
+    default: false
+  },
+  // 是否禁用
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// 定义组件事件
+const emit = defineEmits(['click'])
+</script>
+
+<style scoped lang="scss">
+@use 'sass:color';
+// 导入变量
+@use '../styles/_variables.scss' as *;
+
+// 按钮基础样式
+.btn {
+  display: inline-block;
+  padding: 8px 16px;
+  border: 1px solid transparent;
+  border-radius: $border-radius-md;
+  font-size: $font-size-base;
+  font-weight: 400;
+  line-height: 1.5;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  &:hover:not(.btn-disabled) {
+    opacity: 0.9;
+  }
+
+  &:active:not(.btn-disabled) {
+    opacity: 1;
+  }
+
+  &.btn-disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  // 主要按钮
+  &-primary {
+    color: #fff;
+    background-color: $primary-color;
+    border-color: $primary-color;
+
+    &:hover:not(.btn-disabled) {
+      background-color: color.adjust($primary-color, $lightness: -10%);
+      border-color: color.adjust($primary-color, $lightness: -10%);
+    }
+  }
+
+  // 成功按钮
+  &-success {
+    color: #fff;
+    background-color: $success-color;
+    border-color: $success-color;
+
+    &:hover:not(.btn-disabled) {
+      background-color: color.adjust($success-color, $lightness: -10%);
+      border-color: color.adjust($success-color, $lightness: -10%);
+    }
+  }
+
+  // 警告按钮
+  &-warning {
+    color: #fff;
+    background-color: $warning-color;
+    border-color: $warning-color;
+
+    &:hover:not(.btn-disabled) {
+      background-color: color.adjust($warning-color, $lightness: -10%);
+      border-color: color.adjust($warning-color, $lightness: -10%);
+    }
+  }
+
+  // 危险按钮
+  &-danger {
+    color: #fff;
+    background-color: $danger-color;
+    border-color: $danger-color;
+
+    &:hover:not(.btn-disabled) {
+      background-color: color.adjust($danger-color, $lightness: -10%);
+      border-color: color.adjust($danger-color, $lightness: -10%);
+    }
+  }
+
+  // 信息按钮
+  &-info {
+    color: #fff;
+    background-color: $info-color;
+    border-color: $info-color;
+
+    &:hover:not(.btn-disabled) {
+      background-color: color.adjust($info-color, $lightness: -10%);
+      border-color: color.adjust($info-color, $lightness: -10%);
+    }
+  }
+
+  // 次要按钮
+  &-secondary {
+    color: #606266;
+    background-color: #fff;
+    border-color: #dcdfe6;
+
+    &:hover:not(.btn-disabled) {
+      color: $primary-color;
+      border-color: $primary-color;
+    }
+  }
+
+  // 按钮尺寸
+  &-small {
+    padding: 4px 8px;
+    font-size: $font-size-small;
+  }
+
+  &-medium {
+    padding: 8px 16px;
+    font-size: $font-size-base;
+  }
+
+  &-large {
+    padding: 12px 24px;
+    font-size: $font-size-large;
+  }
+
+  // 块级按钮
+  &-block {
+    display: block;
+    width: 100%;
+  }
+}
+</style>

package/src/components/Card.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="card" :class="{ 'card-shadow': shadow }">
+    <!-- 卡片头部 -->
+    <div class="card-header" v-if="$slots.header || title">
+      <h3 class="card-header-title" v-if="title">{{ title }}</h3>
+      <slot name="header"></slot>
+    </div>
+
+    <!-- 卡片主体 -->
+    <div class="card-body">
+      <slot></slot>
+    </div>
+
+    <!-- 卡片底部 -->
+    <div class="card-footer" v-if="$slots.footer">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+// 定义组件属性
+const props = defineProps({
+  // 卡片标题
+  title: {
+    type: String,
+    default: ''
+  },
+  // 是否显示阴影
+  shadow: {
+    type: Boolean,
+    default: true
+  }
+})
+</script>
+
+<style scoped lang="scss">
+// 导入变量
+@use '../styles/_variables.scss' as *;
+
+// 卡片样式
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  border-radius: $border-radius-lg;
+  transition: box-shadow 0.3s;
+
+  // 阴影样式
+  &-shadow {
+    box-shadow: $shadow-sm;
+
+    &:hover {
+      box-shadow: $shadow-md;
+    }
+  }
+
+  // 卡片头部
+  &-header {
+    padding: 16px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  // 卡片头部标题
+  &-header-title {
+    margin: 0;
+    font-size: $font-size-large;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  // 卡片主体
+  &-body {
+    flex: 1 1 auto;
+    padding: 16px;
+    color: #606266;
+  }
+
+  // 卡片底部
+  &-footer {
+    padding: 16px;
+    border-top: 1px solid rgba(0, 0, 0, 0.125);
+    background-color: #fafafa;
+    border-bottom-left-radius: calc($border-radius-lg - 1px);
+    border-bottom-right-radius: calc($border-radius-lg - 1px);
+  }
+}
+</style>

package/src/components/HelloWorld.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String,
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Learn more about IDE Support for Vue in the
+    <a
+      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
+      target="_blank"
+      >Vue Docs Scaling up Guide</a
+    >.
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

package/src/components/Modal.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="modal" :class="{ 'modal-show': visible }" v-if="visible">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <!-- 模态框头部 -->
+        <div class="modal-header">
+          <h3 class="modal-header-title" v-if="title">{{ title }}</h3>
+          <button class="modal-header-close" @click="handleClose">&times;</button>
+        </div>
+
+        <!-- 模态框主体 -->
+        <div class="modal-body">
+          <slot></slot>
+        </div>
+
+        <!-- 模态框底部 -->
+        <div class="modal-footer" v-if="$slots.footer">
+          <slot name="footer"></slot>
+        </div>
+        <!-- 默认底部按钮 -->
+        <div class="modal-footer" v-else-if="showFooter">
+          <button class="btn btn-secondary" @click="handleCancel">取消</button>
+          <button class="btn btn-primary" @click="handleConfirm">确定</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import Button from './Button.vue'
+
+// 定义组件属性
+const props = defineProps({
+  // 是否显示模态框
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  // 模态框标题
+  title: {
+    type: String,
+    default: ''
+  },
+  // 是否显示默认底部按钮
+  showFooter: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// 定义组件事件
+const emit = defineEmits(['close', 'cancel', 'confirm'])
+
+// 关闭模态框
+const handleClose = () => {
+  emit('close')
+}
+
+// 取消按钮事件
+const handleCancel = () => {
+  emit('cancel')
+}
+
+// 确定按钮事件
+const handleConfirm = () => {
+  emit('confirm')
+}
+</script>
+
+<style scoped lang="scss">
+// 导入变量
+@use '../styles/_variables.scss' as *;
+
+// 模态框样式
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1050;
+  display: none;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  outline: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+
+  // 显示模态框
+  &-show {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  // 模态框对话框
+  &-dialog {
+    position: relative;
+    width: auto;
+    margin: 10px;
+    pointer-events: none;
+
+    @media (min-width: 576px) {
+      max-width: 500px;
+      margin: 1.75rem auto;
+    }
+  }
+
+  // 模态框内容
+  &-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    pointer-events: auto;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: $border-radius-lg;
+    outline: 0;
+    box-shadow: $shadow-lg;
+  }
+
+  // 模态框头部
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    border-bottom: 1px solid #dee2e6;
+    border-top-left-radius: calc($border-radius-lg - 1px);
+    border-top-right-radius: calc($border-radius-lg - 1px);
+  }
+
+  // 模态框头部标题
+  &-header-title {
+    margin: 0;
+    font-size: $font-size-large;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  // 模态框头部关闭按钮
+  &-header-close {
+    padding: 0;
+    background-color: transparent;
+    border: 0;
+    cursor: pointer;
+    font-size: 1.5rem;
+    line-height: 1;
+    color: #6c757d;
+    opacity: 0.5;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  // 模态框主体
+  &-body {
+    position: relative;
+    flex: 1 1 auto;
+    padding: 16px;
+    color: #606266;
+  }
+
+  // 模态框底部
+  &-footer {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 16px;
+    border-top: 1px solid #dee2e6;
+    border-bottom-left-radius: calc($border-radius-lg - 1px);
+    border-bottom-right-radius: calc($border-radius-lg - 1px);
+
+    >*+* {
+      margin-left: 8px;
+    }
+  }
+}
+</style>

package/src/index.js

@@ -0,0 +1,55 @@
+/**
+ * LittleDizzy 组件库
+ * 
+ * 使用方式：
+ * 
+ * 1. 完整引入
+ * import LittleDizzy from 'little-dizzy'
+ * import 'little-dizzy/dist/styles/index.css'
+ * app.use(LittleDizzy)
+ * 
+ * 2. 按需引入组件
+ * import { Button, Card, Modal } from 'little-dizzy'
+ * app.component('Button', Button)
+ * 
+ * 3. 引入代码片段
+ * import { snippets, registerSnippet } from 'little-dizzy'
+ */
+
+// 导入组件
+import Button from './components/Button.vue'
+import Card from './components/Card.vue'
+import Modal from './components/Modal.vue'
+
+// 导入代码片段系统
+import * as snippetsModule from './snippets/index.js'
+
+// 组件列表
+const components = {
+  Button,
+  Card,
+  Modal
+}
+
+// 安装函数
+const install = (app, options = {}) => {
+  // 注册所有组件
+  Object.entries(components).forEach(([name, component]) => {
+    app.component(options.prefix ? `${options.prefix}${name}` : name, component)
+  })
+}
+
+// 导出代码片段相关
+export const snippets = snippetsModule.getSnippets
+export const registerSnippet = snippetsModule.registerSnippet
+export const registerSnippets = snippetsModule.registerSnippets
+export const getSnippet = snippetsModule.getSnippet
+
+// 导出单个组件（按需引入）
+export { Button, Card, Modal }
+
+// 默认导出（完整引入）
+export default {
+  install,
+  ...components
+}

package/src/snippets/index.js

@@ -0,0 +1,166 @@
+/**
+ * LittleDizzy 代码片段系统
+ * 
+ * 使用方式：
+ * 
+ * import { registerSnippet, getSnippets } from 'little-dizzy'
+ * 
+ * // 注册自定义代码片段
+ * registerSnippet({
+ *   name: 'MyButton',
+ *   type: 'html',
+ *   label: '我的按钮',
+ *   code: '<button class="my-btn">Click</button>'
+ * })
+ * 
+ * // 获取所有代码片段
+ * const allSnippets = getSnippets()
+ */
+
+// 代码片段注册表
+const snippetRegistry = new Map()
+
+/**
+ * 注册代码片段
+ * @param {Object} snippet - 代码片段对象
+ * @param {string} snippet.name - 唯一标识符
+ * @param {string} snippet.type - 类型: 'vue' | 'html' | 'css' | 'javascript'
+ * @param {string} snippet.label - 显示名称
+ * @param {string} snippet.code - 代码内容
+ * @returns {boolean} 是否注册成功
+ */
+export function registerSnippet (snippet) {
+  if (!snippet || !snippet.name) {
+    console.warn('[LittleDizzy] Snippet must have a name property')
+    return false
+  }
+
+  snippetRegistry.set(snippet.name, {
+    name: snippet.name,
+    type: snippet.type || 'html',
+    label: snippet.label || snippet.name,
+    code: snippet.code || '',
+    isCustom: snippet.isCustom || false,
+    ...snippet
+  })
+
+  return true
+}
+
+/**
+ * 批量注册代码片段
+ * @param {Array} snippets - 代码片段数组
+ * @returns {number} 成功注册的数量
+ */
+export function registerSnippets (snippets) {
+  if (!Array.isArray(snippets)) {
+    console.warn('[LittleDizzy] registerSnippets expects an array')
+    return 0
+  }
+
+  let count = 0
+  snippets.forEach(snippet => {
+    if (registerSnippet(snippet)) count++
+  })
+  return count
+}
+
+/**
+ * 获取所有已注册的代码片段
+ * @returns {Object} 代码片段对象 { name: snippet }
+ */
+export function getSnippets () {
+  const result = {}
+  snippetRegistry.forEach((value, key) => {
+    result[key] = value
+  })
+  return result
+}
+
+/**
+ * 获取单个代码片段
+ * @param {string} name - 代码片段名称
+ * @returns {Object|undefined} 代码片段对象
+ */
+export function getSnippet (name) {
+  return snippetRegistry.get(name)
+}
+
+/**
+ * 检查代码片段是否存在
+ * @param {string} name - 代码片段名称
+ * @returns {boolean}
+ */
+export function hasSnippet (name) {
+  return snippetRegistry.has(name)
+}
+
+/**
+ * 移除代码片段
+ * @param {string} name - 代码片段名称
+ * @returns {boolean} 是否移除成功
+ */
+export function removeSnippet (name) {
+  return snippetRegistry.delete(name)
+}
+
+/**
+ * 清空所有代码片段
+ */
+export function clearSnippets () {
+  snippetRegistry.clear()
+}
+
+/**
+ * 获取代码片段数量
+ * @returns {number}
+ */
+export function getSnippetCount () {
+  return snippetRegistry.size
+}
+
+/**
+ * 获取代码片段列表（数组形式）
+ * @returns {Array}
+ */
+export function getSnippetList () {
+  return Array.from(snippetRegistry.values())
+}
+
+// 代码类型配置
+export const codeTypes = {
+  vue: {
+    label: 'Vue',
+    extension: '.vue',
+    color: '#42b883'
+  },
+  html: {
+    label: 'HTML',
+    extension: '.html',
+    color: '#e34c26'
+  },
+  javascript: {
+    label: 'JavaScript',
+    extension: '.js',
+    color: '#f7df1e'
+  }
+}
+
+// 导入并注册预设代码片段
+import { presetSnippets } from './presets/index.js'
+registerSnippets(presetSnippets)
+
+// 默认导出
+export default {
+  registerSnippet,
+  registerSnippets,
+  getSnippets,
+  getSnippet,
+  hasSnippet,
+  removeSnippet,
+  clearSnippets,
+  getSnippetCount,
+  getSnippetList,
+  codeTypes
+}
+