Fixed style error.

pull/3445/head
ruibaby 2019-04-12 13:39:40 +08:00
parent d30a5b5ca1
commit d41b27c3b0
3 changed files with 297 additions and 294 deletions

View File

@ -1,111 +1,113 @@
<template>
<a-row :gutter="12">
<a-col
:xl="10"
:lg="10"
:md="10"
:sm="24"
:xs="24"
:style="{ 'padding-bottom': '12px' }"
>
<a-card title="添加菜单">
<a-form layout="horizontal">
<a-form-item
label="名称:"
help="* 页面上所显示的名称"
>
<a-input v-model="menuToCreate.name" />
</a-form-item>
<a-form-item
label="路径:"
help="* 菜单的路径"
>
<a-input v-model="menuToCreate.url" />
</a-form-item>
<a-form-item label="上级菜单:">
<a-select v-model="menuToCreate.parentId">
<a-select-option
v-for="(menu,index) in menus"
:key="index"
:value="menu.id"
>{{ menu.name }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="排序编号:">
<a-input
type="number"
v-model="menuToCreate.sort"
/>
</a-form-item>
<a-form-item
label="图标:"
help="* 请根据主题的支持选填"
>
<a-input v-model="menuToCreate.icon" />
</a-form-item>
<a-form-item label="打开方式:">
<a-select
defaultValue="_self"
v-model="menuToCreate.target"
<div class="page-header-index-wide">
<a-row :gutter="12">
<a-col
:xl="10"
:lg="10"
:md="10"
:sm="24"
:xs="24"
:style="{ 'padding-bottom': '12px' }"
>
<a-card title="添加菜单">
<a-form layout="horizontal">
<a-form-item
label="名称:"
help="* 页面上所显示的名称"
>
<a-select-option value="_self">当前窗口</a-select-option>
<a-select-option value="_blank">新窗口</a-select-option>
</a-select>
</a-form-item>
<a-form-item>
<a-button
type="primary"
@click="createMenu"
>保存</a-button>
</a-form-item>
</a-form>
</a-card>
</a-col>
<a-col
:xl="14"
:lg="14"
:md="14"
:sm="24"
:xs="24"
:style="{ 'padding-bottom': '12px' }"
>
<a-card title="所有菜单">
<a-table
:columns="columns"
:dataSource="menus"
:loading="loading"
:rowKey="menu => menu.id"
>
<ellipsis
:length="30"
tooltip
slot="name"
slot-scope="text"
>
{{ text }}
</ellipsis>
<span
slot="action"
slot-scope="text, record"
>
<a
href="javascript:;"
@click="editMenu(record.id)"
>编辑</a>
<a-divider type="vertical" />
<a-popconfirm
:title="'你确定要删除【' + record.name + '】菜单?'"
@confirm="deleteMenu(record.id)"
okText="确定"
cancelText="取消"
<a-input v-model="menuToCreate.name" />
</a-form-item>
<a-form-item
label="路径:"
help="* 菜单的路径"
>
<a href="javascript:;">删除</a>
</a-popconfirm>
</span>
</a-table>
</a-card>
</a-col>
</a-row>
<a-input v-model="menuToCreate.url" />
</a-form-item>
<a-form-item label="上级菜单:">
<a-select v-model="menuToCreate.parentId">
<a-select-option
v-for="(menu,index) in menus"
:key="index"
:value="menu.id"
>{{ menu.name }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="排序编号:">
<a-input
type="number"
v-model="menuToCreate.sort"
/>
</a-form-item>
<a-form-item
label="图标:"
help="* 请根据主题的支持选填"
>
<a-input v-model="menuToCreate.icon" />
</a-form-item>
<a-form-item label="打开方式:">
<a-select
defaultValue="_self"
v-model="menuToCreate.target"
>
<a-select-option value="_self">当前窗口</a-select-option>
<a-select-option value="_blank">新窗口</a-select-option>
</a-select>
</a-form-item>
<a-form-item>
<a-button
type="primary"
@click="createMenu"
>保存</a-button>
</a-form-item>
</a-form>
</a-card>
</a-col>
<a-col
:xl="14"
:lg="14"
:md="14"
:sm="24"
:xs="24"
:style="{ 'padding-bottom': '12px' }"
>
<a-card title="所有菜单">
<a-table
:columns="columns"
:dataSource="menus"
:loading="loading"
:rowKey="menu => menu.id"
>
<ellipsis
:length="30"
tooltip
slot="name"
slot-scope="text"
>
{{ text }}
</ellipsis>
<span
slot="action"
slot-scope="text, record"
>
<a
href="javascript:;"
@click="editMenu(record.id)"
>编辑</a>
<a-divider type="vertical" />
<a-popconfirm
:title="'你确定要删除【' + record.name + '】菜单?'"
@confirm="deleteMenu(record.id)"
okText="确定"
cancelText="取消"
>
<a href="javascript:;">删除</a>
</a-popconfirm>
</span>
</a-table>
</a-card>
</a-col>
</a-row>
</div>
</template>
<script>

View File

@ -1,37 +1,39 @@
<template>
<a-row :gutter="12">
<a-col
:xl="18"
:lg="18"
:md="18"
:sm="24"
:xs="24"
:style="{'padding-bottom':'12px'}"
>
<a-card>
<a-form layout="vertical">
<a-form-item>
<codemirror :value="value"></codemirror>
</a-form-item>
<a-form-item>
<a-button type="primary">保存</a-button>
</a-form-item>
</a-form>
</a-card>
</a-col>
<a-col
:xl="6"
:lg="6"
:md="6"
:sm="24"
:xs="24"
:style="{'padding-bottom':'12px'}"
>
<a-card title="Anatole 主题">
<theme-file :files="files" />
</a-card>
</a-col>
</a-row>
<div class="page-header-index-wide">
<a-row :gutter="12">
<a-col
:xl="18"
:lg="18"
:md="18"
:sm="24"
:xs="24"
:style="{'padding-bottom':'12px'}"
>
<a-card>
<a-form layout="vertical">
<a-form-item>
<codemirror :value="value"></codemirror>
</a-form-item>
<a-form-item>
<a-button type="primary">保存</a-button>
</a-form-item>
</a-form>
</a-card>
</a-col>
<a-col
:xl="6"
:lg="6"
:md="6"
:sm="24"
:xs="24"
:style="{'padding-bottom':'12px'}"
>
<a-card title="Anatole 主题">
<theme-file :files="files" />
</a-card>
</a-col>
</a-row>
</div>
</template>
<script>

View File

@ -1,172 +1,171 @@
<template>
<div>
<div class="page-header-index-wide">
<a-row
:gutter="12"
type="flex"
align="middle"
>
<a-col
class="theme-item"
:xl="6"
:lg="6"
:md="12"
:sm="12"
:xs="24"
v-for="(theme, index) in themes"
:key="index"
>
<a-card :bodyStyle="{ padding: '14px' }">
<img
:alt="theme.name"
:src="theme.screenshots"
slot="cover"
>
<a-divider></a-divider>
<div class="theme-control">
<span class="theme-title">{{ theme.name }}</span>
<a-button-group class="theme-button">
<a-button
type="primary"
v-if="theme.activated"
disabled
>已启用</a-button>
<a-button
type="primary"
@click="activeTheme(theme.id)"
v-else
>启用</a-button>
<a-button
@click="settingDrawer(theme)"
v-if="theme.hasOptions"
>设置</a-button>
</a-button-group>
</div>
</a-card>
</a-col>
</a-row>
<a-drawer
v-if="themeProperty"
:title="themeProperty.name + ' 主题设置'"
width="100%"
closable
@close="onClose"
:visible="visible"
destroyOnClose
>
<a-row
:gutter="12"
type="flex"
align="middle"
>
<a-col
class="theme-item"
:xl="6"
:lg="6"
:xl="12"
:lg="12"
:md="12"
:sm="12"
:sm="24"
:xs="24"
v-for="(theme, index) in themes"
:key="index"
>
<a-card :bodyStyle="{ padding: '14px' }">
<a-skeleton
active
:loading="optionLoading"
:paragraph="{rows: 10}"
>
<img
:alt="theme.name"
:src="theme.screenshots"
slot="cover"
v-if="themeProperty"
:alt="themeProperty.name"
:src="themeProperty.screenshots"
width="100%"
>
<a-divider></a-divider>
<div class="theme-control">
<span class="theme-title">{{ theme.name }}</span>
<a-button-group class="theme-button">
<a-button
type="primary"
v-if="theme.activated"
disabled
>已启用</a-button>
<a-button
type="primary"
@click="activeTheme(theme.id)"
v-else
>启用</a-button>
<a-button
@click="settingDrawer(theme)"
v-if="theme.hasOptions"
>设置</a-button>
</a-button-group>
</div>
</a-card>
</a-skeleton>
</a-col>
<a-col
:xl="12"
:lg="12"
:md="12"
:sm="24"
:xs="24"
>
<a-skeleton
active
:loading="optionLoading"
:paragraph="{rows: 20}"
>
<a-tabs defaultActiveKey="0">
<a-tab-pane
v-for="(group, index) in themeConfiguration"
:key="index.toString()"
:tab="group.label"
>
<a-form layout="vertical">
<a-form-item
v-for="(item, index1) in group.items"
:label="item.label + ''"
:key="index1"
:wrapper-col="wrapperCol"
>
<a-input
v-model="themeSettings[item.name]"
:defaultValue="item.defaultValue"
v-if="item.type == 'TEXT'"
/>
<a-input
type="textarea"
:autosize="{ minRows: 5 }"
v-model="themeSettings[item.name]"
v-else-if="item.type == 'TEXTAREA'"
/>
<a-radio-group
v-decorator="['radio-group']"
:defaultValue="item.defaultValue"
v-model="themeSettings[item.name]"
v-else-if="item.type == 'RADIO'"
>
<a-radio
v-for="(option, index2) in item.options"
:key="index2"
:value="option.value"
>{{ option.label }}</a-radio>
</a-radio-group>
<a-select
v-model="themeSettings[item.name]"
:defaultValue="item.defaultValue"
v-else-if="item.type == 'SELECT'"
>
<a-select-option
v-for="option in item.options"
:key="option.value"
:value="option.value"
>{{ option.label }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item>
<a-button
type="primary"
@click="saveSettings"
>保存</a-button>
</a-form-item>
</a-form>
</a-tab-pane>
<a-tab-pane
key="about"
tab="关于"
>
<a-form-item>
<a-popconfirm
:title="'确定删除【' + themeProperty.name + '】主题?'"
@confirm="deleteTheme(themeProperty.id)"
okText="确定"
cancelText="取消"
>
<a-button type="danger">删除该主题</a-button>
</a-popconfirm>
</a-form-item>
</a-tab-pane>
</a-tabs>
</a-skeleton>
</a-col>
</a-row>
<a-drawer
v-if="themeProperty"
:title="themeProperty.name + ' 主题设置'"
width="100%"
closable
@close="onClose"
:visible="visible"
destroyOnClose
>
<a-row
:gutter="12"
type="flex"
>
<a-col
:xl="12"
:lg="12"
:md="12"
:sm="24"
:xs="24"
>
<a-skeleton
active
:loading="optionLoading"
:paragraph="{rows: 10}"
>
<img
v-if="themeProperty"
:alt="themeProperty.name"
:src="themeProperty.screenshots"
width="100%"
>
</a-skeleton>
</a-col>
<a-col
:xl="12"
:lg="12"
:md="12"
:sm="24"
:xs="24"
>
<a-skeleton
active
:loading="optionLoading"
:paragraph="{rows: 20}"
>
<a-tabs defaultActiveKey="0">
<a-tab-pane
v-for="(group, index) in themeConfiguration"
:key="index.toString()"
:tab="group.label"
>
<a-form layout="vertical">
<a-form-item
v-for="(item, index1) in group.items"
:label="item.label + ''"
:key="index1"
:wrapper-col="wrapperCol"
>
<a-input
v-model="themeSettings[item.name]"
:defaultValue="item.defaultValue"
v-if="item.type == 'TEXT'"
/>
<a-input
type="textarea"
:autosize="{ minRows: 5 }"
v-model="themeSettings[item.name]"
v-else-if="item.type == 'TEXTAREA'"
/>
<a-radio-group
v-decorator="['radio-group']"
:defaultValue="item.defaultValue"
v-model="themeSettings[item.name]"
v-else-if="item.type == 'RADIO'"
>
<a-radio
v-for="(option, index2) in item.options"
:key="index2"
:value="option.value"
>{{ option.label }}</a-radio>
</a-radio-group>
<a-select
v-model="themeSettings[item.name]"
:defaultValue="item.defaultValue"
v-else-if="item.type == 'SELECT'"
>
<a-select-option
v-for="option in item.options"
:key="option.value"
:value="option.value"
>{{ option.label }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item>
<a-button
type="primary"
@click="saveSettings"
>保存</a-button>
</a-form-item>
</a-form>
</a-tab-pane>
<a-tab-pane
key="about"
tab="关于"
>
<a-form-item>
<a-popconfirm
:title="'确定删除【' + themeProperty.name + '】主题?'"
@confirm="deleteTheme(themeProperty.id)"
okText="确定"
cancelText="取消"
>
<a-button type="danger">删除该主题</a-button>
</a-popconfirm>
</a-form-item>
</a-tab-pane>
</a-tabs>
</a-skeleton>
</a-col>
</a-row>
</a-drawer>
</div>
</a-drawer>
</div>
</template>
<script>