dcqc-vue2-layout v1.0.1

dcqc-vue2-layout

DCQC Vue2 Layout Component - A powerful and flexible layout component for Vue.js 2.x applications.

Features

• 📱 Responsive layout
• 🎨 Theme customization (light/dark)
• 📦 SVG icon support
• 🤖 Smart AI assistant (optional)
• 🍞 Breadcrumb navigation
• 🎯 Vue Router integration
• 💾 Vuex state management

Installation

npm install dcqc-vue2-layout

Quick Start

1. Import and use the layout in your main.js:

import Vue from 'vue'
import { Layout, store as layoutStore } from 'dcqc-vue2-layout'
import 'dcqc-vue2-layout/dist/index.css'

// Register layout component
Vue.use(Layout)

// Merge store
const store = new Vuex.Store({
  modules: {
    layout: layoutStore
  }
})

// Set store globally for request interceptor
window.$store = store

2. Configure your router:

import Vue from 'vue'
import Router from 'vue-router'
import { Layout } from 'dcqc-vue2-layout'

Vue.use(Router)

export const constantRoutes = [
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/dashboard'),
        name: 'Dashboard',
        meta: { title: '首页', icon: 'dashboard' }
      }
    ]
  }
]

export default new Router({
  routes: constantRoutes
})

3. Use the AI Assistant (optional):

<template>
  <div>
    <bot-chat 
      :onGetAnswer="handleGetAnswer"
      @close="handleClose"
    />
  </div>
</template>

<script>
export default {
  methods: {
    async handleGetAnswer(question) {
      // Implement your Q&A logic
      const response = await yourQuestionAnsweringAPI(question)
      return response.answer
    },
    handleClose() {
      // Handle close event
    }
  }
}
</script>

4. Configure theme:

import { store } from 'dcqc-vue2-layout'

// Set theme
store.dispatch('settings/changeSetting', {
  key: 'theme',
  value: 'dark' // or 'light'
})

// Set sidebar logo visibility
store.dispatch('settings/changeSetting', {
  key: 'sidebarLogo',
  value: true
})

API

Layout Props

BotChat Props

Store Modules

app

• State:
  • sidebar: Controls sidebar collapse state
  • device: Current device type (desktop/mobile)
  • size: UI size

settings

• State:
  • theme: Current theme (dark/light)
  • sidebarLogo: Whether to show logo in sidebar

Browser Support

• Modern browsers and Internet Explorer 11+

Contributing

Please read our contributing guide before submitting PRs.

License

MIT