diff --git a/src/api/article-type/article-type.js b/src/api/article-type/article-type.js
new file mode 100644
index 0000000..fec5612
--- /dev/null
+++ b/src/api/article-type/article-type.js
@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+export function index(params,isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/article-type/index',
+    params,
+isLoading
+  })
+}
+
+export function show(params,isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/article-type/show',
+    params,
+    isLoading
+  })
+}
+
+export function save(data, isLoading = true) {
+  return request({
+    method: 'post',
+    url: '/api/admin/article-type/save',
+    data,
+    isLoading
+  })
+}
+
+export function destroy(params, isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/article-type/destroy',
+    params,
+    isLoading
+  })
+}
diff --git a/src/views/ArticleType/ArticleType.vue b/src/views/ArticleType/ArticleType.vue
new file mode 100644
index 0000000..5caf3fc
--- /dev/null
+++ b/src/views/ArticleType/ArticleType.vue
@@ -0,0 +1,337 @@
+<template>
+  <div>
+    <vxe-toolbar export print custom ref="toolbar">
+      <template #buttons>
+        <el-button
+          icon="el-icon-plus"
+          type="primary"
+          size="small"
+          @click="isShowAdd = true"
+          >新增</el-button
+        >
+        <el-button
+          icon="el-icon-search"
+          type="primary"
+          plain
+          size="small"
+          @click="getList"
+          >搜索</el-button
+        >
+      </template>
+    </vxe-toolbar>
+    <vxe-table
+      ref="table"
+      stripe
+      style="margin-top: 10px"
+      :loading="loading"
+      keep-source
+      show-overflow
+      :column-config="{ resizable: true }"
+      :edit-rules="validRules"
+      :edit-config="{
+        trigger: 'manual',
+        mode: 'row',
+        showStatus: true,
+        isHover: true,
+        autoClear: false,
+      }"
+      :align="allAlign"
+      :data="tableData"
+    >
+      <vxe-column type="seq" width="58" align="center" />
+
+      <vxe-column
+        field="title"
+        width="160"
+        title="栏目名称"
+        :edit-render="{ name: 'input', attrs: { type: 'text' } }"
+      />
+
+      <vxe-column
+        field="status"
+        width="140"
+        title="状态"
+        :edit-render="{
+          name: 'VxeSelect',
+          options: [
+            { name: '是', value: 1 },
+            { name: '否', value: 0 },
+          ],
+        }"
+      />
+
+      <vxe-column
+        field="site_id"
+        width="180"
+        title="站点选择"
+        :edit-render="{
+          name: 'VxeSelect',
+          options: site,
+          props: { multiple: true },
+          optionProps: { value: 'value', label: 'label' },
+        }"
+      />
+
+      <vxe-column
+        field="remark"
+        width="160"
+        title="备注"
+        :edit-render="{ name: 'input', attrs: { type: 'text' } }"
+      />
+
+      <vxe-column field="operate" title="操作" min-width="220">
+        <template #default="{ row }">
+          <template v-if="isActiveStatus(row)">
+            <el-button size="small" type="primary" @click="saveRowEvent(row)"
+              >保存</el-button
+            >
+            <el-button
+              size="small"
+              type="primary"
+              plain
+              @click="cancelRowEvent(row)"
+              >取消</el-button
+            >
+          </template>
+          <template v-else>
+            <el-button size="small" type="warning" @click="editRowEvent(row)"
+              >编辑</el-button
+            >
+            <el-button size="small" type="danger" @click="destroyRowEvent(row)"
+              >删除</el-button
+            >
+          </template>
+        </template>
+      </vxe-column>
+    </vxe-table>
+
+    <el-pagination
+      style="margin-top: 10px"
+      :current-page.sync="select.page"
+      :page-sizes="[20, 30, 40, 50]"
+      :page-size.sync="select.page_size"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+      @size-change="
+        (e) => {
+          select.page_size = e;
+          select.page = 1;
+          getList();
+        }
+      "
+      @current-change="
+        (e) => {
+          select.page = e;
+          getList();
+        }
+      "
+    />
+<!--    <AddArticleType-->
+<!--      ref="AddArticleType"-->
+<!--      :is-show.sync="isShowAdd"-->
+<!--      @refresh="getList"-->
+<!--    />-->
+  </div>
+</template>
+
+<script>
+import { uploadSize } from "@/settings";
+import { deepCopy, formatFileSize } from "@/utils";
+import { destroy, index, save } from "@/api/article-type/article-type";
+//import AddArticleType from "./components/AddArticleType.vue";
+import axios from "axios";
+import { getToken } from "@/utils/auth";
+
+import { index as siteIndex } from "@/api/site/site";
+
+export default {
+  components: {
+    //AddArticleType,
+  },
+  data() {
+    return {
+      uploadSize,
+      examineKey: 0,
+      isShowAdd: false,
+
+      loading: false,
+      select: {
+        page: 1,
+        page_size: 20,
+        keyword: "",
+      },
+      total: 0,
+      allAlign: null,
+      tableData: [],
+      validRules: {},
+      form: {
+        title: "",
+
+        status: "",
+
+        site_id: "",
+
+        remark: "",
+      },
+
+      site: [],
+    };
+  },
+  computed: {
+    isActiveStatus() {
+      return function (row) {
+        if (this.$refs["table"]) {
+          return this.$refs["table"].isEditByRow(row);
+        }
+      };
+    },
+  },
+  created() {
+    this.getSite();
+
+    this.getList();
+  },
+  mounted() {
+    this.bindToolbar();
+  },
+  methods: {
+    async getSite() {
+      try {
+        const res = await siteIndex(
+          {
+            page: 1,
+            page_size: 999,
+          },
+          false
+        );
+        this.site = res.data;
+      } catch (err) {
+        console.error(err);
+      }
+    },
+
+    uploadMethod(file, row, fieldName) {
+      const formData = new FormData();
+      formData.append("file", file);
+      window.$_uploading = true;
+      return axios
+        .post(process.env.VUE_APP_UPLOAD_API, formData, {
+          headers: {
+            Authorization: `Bearer ${getToken()}`,
+          },
+        })
+        .then((response) => {
+          window.$_uploading = false;
+          if (response.status === 200 && !response.data.code) {
+            if (!(this.form[fieldName] instanceof Array)) {
+              this.form[fieldName] = [];
+            }
+            this.form[fieldName].push({
+              response: response.data.data,
+              name: response.data.data.original_name,
+              url: response.data.data.url,
+            });
+          } else {
+            this.$message.error("上传失败");
+          }
+        })
+        .catch((err) => {
+          window.$_uploading = false;
+        });
+    },
+    bindToolbar() {
+      this.$nextTick(() => {
+        if (this.$refs["table"] && this.$refs["toolbar"]) {
+          this.$refs["table"].connect(this.$refs["toolbar"]);
+        }
+      });
+    },
+
+    editRowEvent(row) {
+      if (this.$refs["table"]) {
+        this.$refs["table"].setEditRow(row);
+      }
+    },
+    cancelRowEvent(row) {
+      if (this.$refs["table"]) {
+        this.$refs["table"].clearEdit().then(() => {
+          // 还原行数据
+          this.$refs["table"].revertData(row);
+        });
+      }
+    },
+
+    async getList() {
+      this.loading = true;
+      try {
+        const res = await index(this.select);
+        this.tableData = res.data;
+        this.total = res.total;
+        this.loading = false;
+      } catch (err) {
+        console.error(err);
+        this.loading = false;
+      }
+    },
+
+    async saveRowEvent(row) {
+      if (window.$_uploading) {
+        this.$message.warning("文件正在上传中");
+        return;
+      }
+      try {
+        const errMap = await this.$refs["table"].validate();
+        if (errMap) {
+          throw new Error(errMap);
+        }
+        await this.$confirm("确认保存？", "提示", {
+          confirmButtonText: "确认",
+          cancelButtonText: "取消",
+        });
+        await this.$refs["table"].clearEdit();
+        const form = deepCopy(this.form);
+        for (const key in form) {
+          form[key] = row[key];
+        }
+        this.loading = true;
+        // TODO: 如果有附件初始值赋值一下
+        await save(form);
+        await this.getList();
+        this.loading = false;
+      } catch (err) {
+        this.loading = false;
+      }
+    },
+    async destroyRowEvent(row) {
+      try {
+        await this.$confirm("确认删除？", "提示", {
+          confirmButtonText: "确认",
+          cancelButtonText: "取消",
+        });
+        this.loading = true;
+        if (row.id) {
+          await destroy({
+            id: row.id,
+          });
+          await this.getList();
+        } else {
+          console.log(row);
+          this.tableData.splice(
+            this.tableData.findIndex((i) => i._X_ROW_KEY === row._X_ROW_KEY),
+            1
+          );
+        }
+        this.loading = false;
+      } catch (err) {
+        this.loading = false;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-tag + .el-tag {
+  margin-left: 4px;
+}
+</style>
diff --git a/src/views/site/components/AddSite.vue b/src/views/site/components/AddSite.vue
new file mode 100644
index 0000000..8f08bf6
--- /dev/null
+++ b/src/views/site/components/AddSite.vue
@@ -0,0 +1,158 @@
+<template>
+    <div>
+        <el-drawer
+                :title="$route.meta.title"
+                direction="rtl"
+                size="68%"
+                :visible.sync="visible"
+                append-to-body
+                :before-close="handleClose"
+                @close="$emit('update:isShow',false)">
+            <section class="drawer-container">
+                <el-form class="drawer-container__form" ref="elForm" :model="form" :rules="rules" label-position="top" label-width="120px" size="small">
+                    <div class="form-layout">
+                        
+                          <el-form-item label="名称" prop="name">
+                              <el-input v-model="form['name']" clearable placeholder="请填写名称"></el-input>
+                          </el-form-item>
+                        
+                          <el-form-item label="状态" prop="status">
+                            <el-switch v-model="form['status']" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否"></el-switch>
+                          </el-form-item>
+                        
+                          <el-form-item label="内容" prop="content">
+                            <el-input v-model="form['content']" clearable placeholder="请填写内容" type="textarea" :autosize="{ minRows: 2 }"></el-input>
+                          </el-form-item>
+                        
+                          <el-form-item label="排序" prop="sort">
+                              <el-input-number v-model="form['sort']" clearable placeholder="请填写排序" :precision="2" controls-position="right"></el-input-number>
+                          </el-form-item>
+                        
+                    </div>
+                </el-form>
+
+                <div class="drawer-container__footer">
+                    <el-button @click="reset">重 置</el-button>
+                    <el-button type="primary" @click="submit" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
+                </div>
+            </section>
+        </el-drawer>
+    </div>
+</template>
+
+<script>
+  import { save, show } from "@/api/site/site";
+  import axios from "axios";
+  import { getToken } from "@/utils/auth";
+  import { uploadSize } from "@/settings";
+  import { formatFileSize } from "@/utils";
+
+  export default {
+  name: "SiteDrawer",
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false,
+      required: true
+    },
+    
+  },
+  data() {
+    return {
+      loading: false,
+      visible: false,
+      form: {
+        
+          name: '',
+        
+          status: 1,
+        
+          content: '',
+        
+          sort: '',
+        
+      },
+      rules: {},
+    }
+  },
+  watch: {
+    isShow(newVal) {
+      this.visible = newVal
+    },
+    visible(newVal) {
+      this.$emit('update:isShow', newVal)
+    },
+  },
+  methods: {
+    formatFileSize,
+    getToken,
+    handleClose(done) {
+      this.$confirm('确定关闭窗口？')
+        .then(_ => {
+          done();
+        })
+        .catch(_ => {});
+    },
+
+    reset() {
+      this.form = {
+          
+          name: '',
+          
+          status: 1,
+          
+          content: '',
+          
+          sort: '',
+          
+      }
+      this.$refs['elForm'].resetFields()
+    },
+    submit() {
+      if (window.$_uploading) {
+        this.$message.warning("文件正在上传中")
+        return
+      }
+      this.$refs['elForm'].validate(async valid => {
+        if (valid) {
+          this.loading = true
+          try {
+            await save(this.form)
+            this.$message.success('新增成功')
+            this.$emit('refresh')
+            this.$emit('update:isShow', false)
+            this.loading = false
+            this.reset()
+          } catch (err) {
+            this.loading = false
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-form-item > * {
+  max-width: 100%;
+}
+.form-layout {
+  display: grid;
+  grid-gap: 2%;
+  grid-template-columns: repeat(2, 1fr);
+}
+.drawer-container {
+  height: 100%;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+
+  &__form {
+    flex: 1;
+  }
+  &__footer {
+    display: flex;
+  }
+}
+</style>
diff --git a/src/views/site/components/ShowSite.vue b/src/views/site/components/ShowSite.vue
new file mode 100644
index 0000000..e7399ac
--- /dev/null
+++ b/src/views/site/components/ShowSite.vue
@@ -0,0 +1,103 @@
+<template>
+    <div>
+        <el-drawer
+                :title="$route.meta.title"
+                direction="rtl"
+                size="68%"
+                :visible.sync="visible"
+                append-to-body
+                @close="$emit('update:isShow',false)">
+            <section class="drawer-container">
+                <el-descriptions class="drawer-container__desc" ref="elDesc" :column="2" direction="vertical" :labelStyle="{ 'font-weight': '500', 'font-size': '15px' }">
+                    
+                    <el-descriptions-item label="名称">
+                        {{ form['name'] }}
+                    </el-descriptions-item>
+                    
+                    <el-descriptions-item label="状态">
+                        {{ form['status'] ? '是' : '否' }}
+                    </el-descriptions-item>
+                    
+                    <el-descriptions-item label="内容" span="2">
+                        {{ form['content'] }}
+                    </el-descriptions-item>
+                    
+                    <el-descriptions-item label="排序">
+                        {{ typeof form['sort'] === 'number' ? form['sort'].toFixed(2) : form['sort'] }}
+                    </el-descriptions-item>
+                    
+                </el-descriptions>
+            </section>
+        </el-drawer>
+    </div>
+</template>
+
+<script>
+  import { show } from "@/api/site/site";
+
+  export default {
+    name: "SiteShow",
+    props: {
+      isShow: {
+        type: Boolean,
+        default: false,
+        required: true
+      },
+  
+  },
+  data() {
+    return {
+      loading: false,
+      visible: false,
+      form: {
+      
+      name: '',
+      
+      status: 1,
+      
+      content: '',
+      
+      sort: '',
+      
+  },
+  }
+  },
+  watch: {
+    isShow(newVal) {
+      this.visible = newVal
+    },
+    visible(newVal) {
+      this.$emit('update:isShow', newVal)
+    },
+  },
+  methods: {
+    async getDetail(id) {
+      try {
+        const detail = await show({
+          id
+        })
+        for (let key in this.form) {
+          if (detail.hasOwnProperty(key)) {
+            this.form[key] = detail[key]
+          }
+        }
+      } catch (err) {
+        console.error(err)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .drawer-container {
+    height: 100%;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+
+    & > * {
+      flex: 1;
+    }
+  }
+</style>