diff --git a/package.json b/package.json
index adc15862..f8ca9f38 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "vue-clipboard2": "^0.3.0",
     "vue-codemirror-lite": "^1.0.4",
     "vue-cropper": "0.4.9",
+    "vue-fragment": "^1.5.0",
     "vue-ls": "^3.2.1",
     "vue-router": "^3.0.2",
     "vue-svg-component-runtime": "^1.0.1",
diff --git a/src/api/theme.js b/src/api/theme.js
new file mode 100644
index 00000000..6a28884d
--- /dev/null
+++ b/src/api/theme.js
@@ -0,0 +1,14 @@
+import service from '@/utils/service'
+
+const baseUrl = '/admin/api/themes'
+
+const themeApi = {}
+
+themeApi.listFiles = () => {
+  return service({
+    url: `${baseUrl}/files`,
+    method: 'get'
+  })
+}
+
+export default themeApi
diff --git a/src/components/Tree/ThemeFile.vue b/src/components/Tree/ThemeFile.vue
new file mode 100644
index 00000000..72db9079
--- /dev/null
+++ b/src/components/Tree/ThemeFile.vue
@@ -0,0 +1,23 @@
+<template>
+  <fragment>
+    <a-tree-node v-for="(item,index) in list" :title="item.name" :key="index">
+      <theme-file :list="item.node"></theme-file>
+    </a-tree-node>
+  </fragment>
+  <!-- <ul>
+    <li v-for="(item,index) in list " :key="index">
+      <p>{{item.name}}</p>
+      <theme-file :list="item.node"></theme-file>
+    </li>
+  </ul> -->
+</template>
+<script>
+import { Fragment } from 'vue-fragment'
+export default {
+  components: { Fragment },
+  name: 'ThemeFile',
+  props: {
+    list: Array
+  }
+}
+</script>
diff --git a/src/components/index.js b/src/components/index.js
index a6a4851c..c8a4850f 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -8,6 +8,7 @@ import Tree from '@/components/Tree/Tree'
 import MultiTab from '@/components/MultiTab'
 import Result from '@/components/Result'
 import IconSelector from '@/components/IconSelector'
+import ThemeFile from '@/components/Tree/ThemeFile'
 
 export {
   AvatarList,
@@ -18,5 +19,6 @@ export {
   Tree,
   MultiTab,
   Result,
-  IconSelector
+  IconSelector,
+  ThemeFile
 }
diff --git a/src/views/interface/ThemeEdit.vue b/src/views/interface/ThemeEdit.vue
index b93e0760..df42da5a 100644
--- a/src/views/interface/ThemeEdit.vue
+++ b/src/views/interface/ThemeEdit.vue
@@ -9,24 +9,9 @@
       <a-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
         <a-card hoverable title="Anatole 主题">
           <a-directory-tree multiple @select="onSelect" @expand="onExpand">
-            <a-tree-node title="source" key="0-0">
-              <a-tree-node title="css" key="0-0-1">
-                <a-tree-node title="style.css" key="0-0-1-2" isLeaf />
-              </a-tree-node>
-              <a-tree-node title="js" key="0-0-2" isLeaf />
-              <a-tree-node title="images" key="0-0-3" isLeaf />
-            </a-tree-node>
-            <a-tree-node title="module" key="0-1">
-              <a-tree-node title="options.ftl" key="0-1-0" isLeaf />
-            </a-tree-node>
-            <a-tree-node title="index.ftl" key="0-2-0" />
-            <a-tree-node title="posts.ftl" key="0-3-0" />
-            <a-tree-node title="category.ftl" key="0-4-0" />
-            <a-tree-node title="tags.ftl" key="0-5-0" />
-            <a-tree-node title="links.ftl" key="0-6-0" />
-            <a-tree-node title="page_author.ftl" key="0-7-0" />
-            <a-tree-node title="page_search.ftl" key="0-8-0" />
+            <theme-file :list="files"></theme-file>
           </a-directory-tree>
+          <!-- <theme-file :list="files"></theme-file> -->
         </a-card>
       </a-col>
     </a-row>
@@ -34,22 +19,34 @@
 </template>
 
 <script>
+import themeApi from '@/api/theme'
+import ThemeFile from '@/components/Tree/ThemeFile'
 import { codemirror } from 'vue-codemirror-lite'
 export default {
   components: {
-    codemirror
+    codemirror,
+    ThemeFile
   },
   data() {
     return {
-      value: 'Hello World'
+      files: [],
+      value: 'Hello world'
     }
   },
+  created() {
+    this.loadFiles()
+  },
   methods: {
     onSelect(keys) {
       console.log('Trigger Select', keys)
     },
     onExpand() {
       console.log('Trigger Expand')
+    },
+    loadFiles() {
+      themeApi.listFiles().then(response => {
+        this.files = response.data.data
+      })
     }
   }
 }