Este projeto apresenta uma solução completa para sistemas de gestão administrativa desenvolvida com Vue.js 2.x em conjunto com a biblioteca de componentes Element UI.

Durante o desenvolvimento de sistemas administrativos, diversos componentes podem ser aproveitados diretamente da biblioteca padrão. No entanto, funcionalidades como upload de imagens com corte, editores de texto rico e gráficos requerem a integração de bibliotecas externas especializadas.

Funcionalidades Principais

• Interface baseada em Element UI
• Sistema de autenticação (login/logout)
• Gerenciamento de tabelas dinâmicas
• Formulários avançados
• Visualização de dados com gráficos
• Editor de texto rico
• Editor Markdown
• Upload de imagens com arrastar e cortar
• Alternância de temas
• Ordenação de listas por arrastar e soltar

Instalação e Configuração

Clone o repositório e instale as dependências:

git clone https://github.com/exemplo/admin-system.git
cd admin-system
npm install

Para iniciar o servidor de desenvolvimento:

npm run dev

Para gerar a versão de produção:

npm run build

Demonstração de Componentes

Tabelas Dinâmicas com vue-datasource

Componente para criação de tabelas com suporte a paginação e pesquisa:

<template>
  <div class="table-wrapper">
    <datasource 
      :source="tableConfig.rows"
      :columns="tableConfig.headers"
      :pagination="tableConfig.paging"
      :page-size="10"
      @page-change="handlePageChange"
      @search="handleSearch">
    </datasource>
  </div>
</template>

<script>
import Datasource from 'vue-datasource';

export default {
  name: 'DynamicTable',
  components: { Datasource },
  data() {
    return {
      tableConfig: {
        headers: [
          { key: 'id', label: 'ID' },
          { key: 'name', label: 'Nome' },
          { key: 'email', label: 'E-mail' }
        ],
        rows: [],
        paging: { currentPage: 1, totalPages: 5 }
      }
    }
  },
  methods: {
    handlePageChange(page) {
      this.tableConfig.paging.currentPage = page;
    },
    handleSearch(query) {
      console.log('Busca:', query);
    }
  }
}
</script>

Editor de Texto Rico com Vue-Quill-Editor

Integração do editor Quill para formatação avançada de texto:

<template>
  <div class="editor-container">
    <quill-editor 
      v-model="articleContent"
      :options="editorSettings"
      @blur="onEditorBlur"
      @focus="onEditorFocus"
      @ready="onEditorReady">
    </quill-editor>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';

export default {
  name: 'RichTextEditor',
  components: { quillEditor },
  data() {
    return {
      articleContent: '',
      editorSettings: {
        placeholder: 'Digite seu conteúdo aqui...',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline'],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'header': [1, 2, 3, false] }],
            ['link', 'image']
          ]
        }
      }
    }
  },
  methods: {
    onEditorBlur() { console.log('Editor perdeu foco'); },
    onEditorFocus() { console.log('Editor em foco'); },
    onEditorReady() { console.log('Editor pronto'); }
  }
}
</script>

Editor Markdown com Vue-SimpleMDE

<template>
  <div class="markdown-wrapper">
    <markdown-editor 
      v-model="markdownText"
      :configs="editorConfig"
      ref="mdEditor">
    </markdown-editor>
  </div>
</template>

<script>
import { markdownEditor } from 'vue-simplemde';
import 'simplemde/dist/simplemde.min.css';

export default {
  name: 'MarkdownEditor',
  components: { markdownEditor },
  data() {
    return {
      markdownText: '',
      editorConfig: {
        spellChecker: false,
        status: ['autosave', 'lines', 'words'],
        renderingConfig: {
          codeSyntaxHighlighting: true
        }
      }
    }
  }
}
</script>

Upload de Imagens com Corte

<template>
  <div class="upload-section">
    <div class="image-preview">
      ![Preview]()
    </div>
    <vue-core-image-upload
      :crop="true"
      :crop-ratio="1:1"
      :max-file-size="5242880"
      :compress="80"
      url="/api/upload"
      accept="image/png,image/jpeg,image/jpg"
      @imageuploaded="onUploadSuccess"
      @errorhandle="onUploadError">
      <button class="upload-btn">Selecionar Imagem</button>
    </vue-core-image-upload>
  </div>
</template>

<script>
import VueCoreImageUpload from 'vue-core-image-upload';

export default {
  name: 'ImageUploader',
  components: { VueCoreImageUpload },
  data() {
    return {
      previewImage: null
    }
  },
  methods: {
    onUploadSuccess(response) {
      this.previewImage = response.url;
      console.log('Upload concluído:', response);
    },
    onUploadError(error) {
      console.error('Erro no upload:', error);
    }
  }
}
</script>

Visualização de Gráficos com vue-schart

<template>
  <div class="chart-area">
    <schart
      canvas-id="salesChart"
      type="bar"
      :data="chartData"
      :options="chartOptions">
    </schart>
  </div>
</template>

<script>
import Schart from 'vue-schart';

export default {
  name: 'SalesChart',
  components: { Schart },
  data() {
    return {
      chartData: [
        { name: 'Jan', value: 850 },
        { name: 'Fev', value: 1200 },
        { name: 'Mar', value: 980 },
        { name: 'Abr', value: 1450 },
        { name: 'Mai', value: 1670 }
      ],
      chartOptions: {
        title: 'Vendas Mensais',
        bgColor: '#f8f9fa',
        titleColor: '#333',
        fillColor: '#42b983',
        axisColor: '#ddd'
      }
    }
  }
}
</script>

Personalização e Manutenção

Removendo Componentes Não Utilizados

Para manter o projeto enxuto, siga estes passos para remover componentes desnecessários:

1. Remover a rota: Em src/router/index.js, exclua a rota correspondente ao componente.
2. Excluir arquivos do componente: Remova os arquivos .vue do diretório src/components/.
3. Limpar referências no menu: Em src/components/common/Sidebar.vue, remova os itens de menu relacionados.
4. Desinstalar a dependência:

npm uninstall nome-do-pacote --save

Alternância de Temas

O sistema suporta múltiplos temas através de arquivos de estilo separados.

Para alterar o tema padrão para um tema alternativo:

1. Em src/main.js, modifique a importação do CSS:

// Tema padrão
// import 'element-ui/lib/theme-default/index.css';

// Tema alternativo
import '../static/css/theme-green/index.css';

2. Em src/App.vue, atualize as referências de estilo:

@import "../static/css/main.css";
@import "../static/css/theme-green/color-green.css";

3. No componente Sidebar.vue, ajuste o atributo theme do elemento el-menu conforme necessário.