ui build

src/views/attachment/AttachmentDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :loading="loading"> Attachment Detail </div>
+  <div class="page-header-index-wide"> Attachment Detail </div>
 </template>
 
 <script>

src/views/attachment/AttachmentList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div> Attachment List </div>
+  <div class="page-header-index-wide"> Attachment List </div>
 </template>
 
 <script>

src/views/comment/CommentList.vue

@@ -1,10 +1,111 @@
 <template>
-  <div> Comment List </div>
+  <div class="page-header-index-wide">
+    <a-card :bordered="false">
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline">
+          <a-row :gutter="48">
+            <a-col :md="6" :sm="24">
+              <a-form-item label="关键词">
+                <a-input v-model="queryParam.id" placeholder />
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <a-form-item label="文章状态">
+                <a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
+                  <a-select-option value="0">已发布</a-select-option>
+                  <a-select-option value="1">待审核</a-select-option>
+                  <a-select-option value="2">回收站</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="12" :sm="24">
+              <span class="table-page-search-submitButtons">
+                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+                <a-button style="margin-left: 8px;" @click="() => (queryParam = {})">重置</a-button>
+              </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+
+      <div class="table-operator">
+        <a-dropdown>
+          <a-menu slot="overlay">
+            <a-menu-item key="1"> <a-icon type="delete" />回收站 </a-menu-item>
+          </a-menu>
+          <a-button
+          >批量操作
+            <a-icon type="down" />
+          </a-button>
+        </a-dropdown>
+      </div>
+      <div style="margin-top:15px">
+        <a-table :columns="columns" :dataSource="data">
+          <a slot="name" slot-scope="text" href="javascript:;">{{ text }}</a>
+          <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
+          <span slot="tags" slot-scope="tags">
+            <a-tag v-for="tag in tags" color="blue" :key="tag">{{ tag }}</a-tag>
+          </span>
+          <span slot="action" slot-scope="text, record">
+            <a href="javascript:;">Invite 一 {{ record.name }}</a>
+            <a-divider type="vertical" />
+            <a href="javascript:;">Delete</a>
+            <a-divider type="vertical" />
+            <a href="javascript:;" class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>
+          </span>
+        </a-table>
+      </div>
+    </a-card>
+  </div>
 </template>
 
 <script>
-export default {}
+export default {
+  name: 'PostList',
+  components: {},
+  data() {
+    return {
+      mdl: {},
+      // 查询参数
+      queryParam: {},
+      // 表头
+      columns: [
+        {
+          title: '#',
+          scopedSlots: { customRender: 'serial' }
+        },
+        {
+          title: '评论者',
+          dataIndex: 'author'
+        },
+        {
+          title: '内容',
+          dataIndex: 'content'
+        },
+        {
+          title: '评论页面',
+          dataIndex: 'post.id'
+        },
+        {
+          title: '日期',
+          dataIndex: 'createTime'
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          width: '150px',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      loadData: parameter => {},
+      selectedRowKeys: [],
+      selectedRows: [],
+      options: {},
+      optionAlertShow: false
+    }
+  },
+  created() {},
+  methods: {}
+}
 </script>
-
-<style scoped>
-</style>

src/views/interface/MenuList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div> Menu List </div>
+  <div class="page-header-index-wide"> Menu List </div>
 </template>
 
 <script>

src/views/interface/ThemeEdit.vue

@@ -1,5 +1,5 @@
 <template>
-  <div> Theme Edit </div>
+  <div class="page-header-index-wide"> Theme Edit </div>
 </template>
 
 <script>

src/views/interface/ThemeList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="page-header-index-wide">
     <a-row :gutter="12" type="flex" align="middle">
       <a-col :xl="6" :lg="6" :md="6" :sm="12" :xs="24">
         <a-card hoverable>

src/views/page/PageEdit.vue

@@ -1,5 +1,5 @@
 <template>
-  <div> Page Edit </div>
+  <div class="page-header-index-wide"> Page Edit </div>
 </template>
 
 <script>

src/views/page/PageList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="page-header-index-wide">
     Page list
   </div>
 </template>

src/views/post/CategoryList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div> Category List </div>
+  <div class="page-header-index-wide"> Category List </div>
 </template>
 
 <script>

src/views/post/PostEdit.vue

@@ -1,5 +1,24 @@
 <template>
-  <div> Post Edit </div>
+  <div class="page-header-index-wide">
+    <a-row :gutter="12">
+      <a-col :xl="18" :lg="18" :md="18" :sm="24" :xs="24">
+        <div style="margin-bottom: 16px">
+          <a-input
+            v-decorator="['title', { rules: [{ required: true, message: '请输入文章标题' }] }]"
+            size="large"
+            placeholder="请输入文章标题"
+          />
+        </div>
+        <div style="margin-bottom: 16px">
+          <a-input addonBefore="https://ryanc.cc/archives/" defaultValue="mysite" style="width: 360px" />
+        </div>
+      </a-col>
+
+      <a-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
+        this is other
+      </a-col>
+    </a-row>
+  </div>
 </template>
 
 <script>

src/views/post/PostList.vue

@@ -1,6 +1,6 @@
 <template>
+  <div class="page-header-index-wide">
     <a-card :bordered="false">
-    <div>
       <div class="table-page-search-wrapper">
         <a-form layout="inline">
           <a-row :gutter="48">
@@ -31,7 +31,7 @@
             <a-col :md="6" :sm="24">
               <span class="table-page-search-submitButtons">
                 <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
-                <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
+                <a-button style="margin-left: 8px;" @click="() => (queryParam = {})">重置</a-button>
               </span>
             </a-col>
           </a-row>
@@ -42,56 +42,38 @@
         <a-button type="primary" icon="plus" @click="handleEdit()">新建</a-button>
         <a-dropdown>
           <a-menu slot="overlay">
-            <a-menu-item key="1">
+            <a-menu-item key="1"> <a-icon type="delete" />回收站 </a-menu-item>
-              <a-icon type="delete"/>删除
-            </a-menu-item>
           </a-menu>
-          <a-button style="margin-left: 8px">批量操作
+          <a-button style="margin-left: 8px;">
+            批量操作
             <a-icon type="down" />
           </a-button>
         </a-dropdown>
       </div>
-
+      <div style="margin-top:15px">
-      <a-table
+        <a-table :columns="columns" :dataSource="data">
-        ref="table"
+          <a slot="name" slot-scope="text" href="javascript:;">{{ text }}</a>
-        size="default"
+          <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
-        rowKey="key"
+          <span slot="tags" slot-scope="tags">
-        :columns="columns"
+            <a-tag v-for="tag in tags" color="blue" :key="tag">{{ tag }}</a-tag>
-        :data="loadData"
+          </span>
-      >
-        <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
           <span slot="action" slot-scope="text, record">
-          <template>
+            <a href="javascript:;">Invite 一 {{ record.name }}</a>
-            <a @click="handleEdit(record)">编辑</a>
             <a-divider type="vertical" />
-          </template>
+            <a href="javascript:;">Delete</a>
-          <a-dropdown>
+            <a-divider type="vertical" />
-            <a class="ant-dropdown-link">更多
+            <a href="javascript:;" class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>
-              <a-icon type="down"/>
-            </a>
-            <a-menu slot="overlay">
-              <a-menu-item>
-                <a href="javascript:;">详情</a>
-              </a-menu-item>
-              <a-menu-item v-if="$auth('table.disable')">
-                <a href="javascript:;">禁用</a>
-              </a-menu-item>
-              <a-menu-item v-if="$auth('table.delete')">
-                <a href="javascript:;">删除</a>
-              </a-menu-item>
-            </a-menu>
-          </a-dropdown>
           </span>
         </a-table>
       </div>
     </a-card>
+  </div>
 </template>
 
 <script>
 export default {
   name: 'PostList',
-  components: {
+  components: {},
-  },
   data() {
     return {
       mdl: {},
@@ -134,18 +116,14 @@ export default {
           scopedSlots: { customRender: 'action' }
         }
       ],
-      loadData: parameter => {
+      loadData: parameter => {},
-      },
       selectedRowKeys: [],
       selectedRows: [],
-      options: {
+      options: {},
-      },
       optionAlertShow: false
     }
   },
-  created() {
+  created() {},
-  },
+  methods: {}
-  methods: {
-  }
 }
 </script>

src/views/post/TagList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="page-header-index-wide">
     <a-row :gutter="12">
       <a-col
         :xl="10"
@@ -7,6 +7,7 @@
         :md="10"
         :sm="24"
         :xs="24"
+        class="a-col"
       >
         <a-card
           hoverable
@@ -40,6 +41,7 @@
         :md="14"
         :sm="24"
         :xs="24"
+        class="a-col"
       >
         <a-card
           hoverable
@@ -100,4 +102,7 @@ export default {
 </script>
 
 <style scoped>
+.a-col{
+  padding:6px;
+}
 </style>

src/views/system/BackupList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div> Backup List </div>
+  <div class="page-header-index-wide"> Backup List </div>
 </template>
 
 <script>

src/views/system/OptionForm.vue

@@ -1,10 +1,93 @@
 <template>
-  <div> Option Form </div>
+  <div class="page-header-index-wide">
+    <a-row>
+      <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
+        <div class="card-container">
+          <a-tabs type="card">
+            <a-tab-pane tab="常规设置" key="general">
+              <a-form layout="vertical">
+                <a-form-item label="博客标题：" :wrapper-col="wrapperCol">
+                  <a-input />
+                </a-form-item>
+                <a-form-item label="博客地址：" :wrapper-col="wrapperCol">
+                  <a-input />
+                </a-form-item>
+                <a-form-item label="LOGO：" :wrapper-col="wrapperCol">
+                  <a-input />
+                </a-form-item>
+                <a-form-item label="Favicon：" :wrapper-col="wrapperCol">
+                  <a-input />
+                </a-form-item>
+                <a-form-item label="页脚信息： " :wrapper-col="wrapperCol">
+                  <a-input type="textarea"/>
+                </a-form-item>
+                <a-form-item>
+                  <a-button type="primary">保存</a-button>
+                </a-form-item>
+              </a-form>
+            </a-tab-pane>
+            <a-tab-pane tab="SEO设置" key="seo">
+            </a-tab-pane>
+            <a-tab-pane tab="文章设置" key="post">
+            </a-tab-pane>
+            <a-tab-pane tab="评论设置" key="comment">
+            </a-tab-pane>
+            <a-tab-pane tab="附件设置" key="attachment">
+            </a-tab-pane>
+            <a-tab-pane tab="后台设置" key="admin">
+            </a-tab-pane>
+            <a-tab-pane tab="邮箱设置" key="email">
+            </a-tab-pane>
+            <a-tab-pane tab="其他设置" key="other">
+            </a-tab-pane>
+          </a-tabs>
+        </div>
+      </a-col>
+    </a-row>
+  </div>
 </template>
-
 <script>
-export default {}
+export default {
+  data() {
+    return {
+      wrapperCol: {
+        xl: { span: 8 },
+        sm: { span: 8 },
+        xs: { span: 24 }
+      }
+    }
+  },
+  methods: {
+    callback(key) {
+      console.log(key)
+    }
+  }
+}
 </script>
+<style>
+.card-container {
+  background: #f5f5f5;
+}
+.card-container > .ant-tabs-card > .ant-tabs-content {
+  margin-top: -16px;
+}
 
-<style scoped>
+.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
+  background: #fff;
+  padding: 16px;
+}
+
+.card-container > .ant-tabs-card > .ant-tabs-bar {
+  border-color: #fff;
+}
+
+.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
+  border-color: transparent;
+  background: transparent;
+}
+
+.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
+  border-color: #fff;
+  background: #fff;
+}
 </style>

src/views/system/ToolList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div> Tool List </div>
+  <div class="page-header-index-wide"> Tool List </div>
 </template>
 
 <script>

src/views/user/Profile.vue

@@ -1,5 +1,5 @@
 <template>
-  <div> Profile </div>
+  <div class="page-header-index-wide"> Profile </div>
 </template>
 
 <script>