Complete ThemeFile.vue

src/components/Tree/ThemeFile.vue

@@ -1,23 +0,0 @@
-<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>

src/components/Tree/Tree.jsx

@@ -1,124 +0,0 @@
-import { Menu, Icon, Input } from 'ant-design-vue'
-
-const { Item, ItemGroup, SubMenu } = Menu
-const { Search } = Input
-
-export default {
-  name: 'Tree',
-  props: {
-    dataSource: {
-      type: Array,
-      required: true
-    },
-    openKeys: {
-      type: Array,
-      default: () => []
-    },
-    search: {
-      type: Boolean,
-      default: false
-    }
-  },
-  created() {
-    this.localOpenKeys = this.openKeys.slice(0)
-  },
-  data() {
-    return {
-      localOpenKeys: []
-    }
-  },
-  methods: {
-    handlePlus(item) {
-      this.$emit('add', item)
-    },
-    handleTitleClick(...args) {
-      this.$emit('titleClick', { args })
-    },
-
-    renderSearch() {
-      return (
-        <Search
-          placeholder="input search text"
-          style="width: 100%; margin-bottom: 1rem"
-        />
-      )
-    },
-    renderIcon(icon) {
-      return icon && (<Icon type={icon} />) || null
-    },
-    renderMenuItem(item) {
-      return (
-        <Item key={item.key}>
-          { this.renderIcon(item.icon) }
-          { item.title }
-          <a class="btn" style="width: 20px;z-index:1300" {...{ on: { click: () => this.handlePlus(item) } }}><a-icon type="plus"/></a>
-        </Item>
-      )
-    },
-    renderItem(item) {
-      return item.children ? this.renderSubItem(item, item.key) : this.renderMenuItem(item, item.key)
-    },
-    renderItemGroup(item) {
-      const childrenItems = item.children.map(o => {
-        return this.renderItem(o, o.key)
-      })
-
-      return (
-        <ItemGroup key={item.key}>
-          <template slot="title">
-            <span>{ item.title }</span>
-            <a-dropdown>
-              <a class="btn"><a-icon type="ellipsis" /></a>
-              <a-menu slot="overlay">
-                <a-menu-item key="1">新增</a-menu-item>
-                <a-menu-item key="2">合并</a-menu-item>
-                <a-menu-item key="3">移除</a-menu-item>
-              </a-menu>
-            </a-dropdown>
-          </template>
-          { childrenItems }
-        </ItemGroup>
-      )
-    },
-    renderSubItem(item, key) {
-      const childrenItems = item.children && item.children.map(o => {
-        return this.renderItem(o, o.key)
-      })
-
-      const title = (
-        <span slot="title">
-          { this.renderIcon(item.icon) }
-          <span>{ item.title }</span>
-        </span>
-      )
-
-      if (item.group) {
-        return this.renderItemGroup(item)
-      }
-      // titleClick={this.handleTitleClick(item)}
-      return (
-        <SubMenu key={key}>
-          { title }
-          { childrenItems }
-        </SubMenu>
-      )
-    }
-  },
-  render() {
-    const { dataSource, search } = this.$props
-
-    // this.localOpenKeys = openKeys.slice(0)
-    const list = dataSource.map(item => {
-      return this.renderItem(item)
-    })
-
-    return (
-      <div class="tree-wrapper">
-        { search ? this.renderSearch() : null }
-        <Menu mode="inline" class="custom-tree" {...{ on: { click: item => this.$emit('click', item), 'update:openKeys': val => { this.localOpenKeys = val } } }} openKeys={this.localOpenKeys}>
-          { list }
-        </Menu>
-      </div>
-    )
-  }
-}

src/components/index.js

@@ -8,17 +8,5 @@ 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 {
+export { AvatarList, Ellipsis, FooterToolbar, NumberInfo, DetailList, Tree, MultiTab, Result, IconSelector }
-  AvatarList,
-  Ellipsis,
-  FooterToolbar,
-  NumberInfo,
-  DetailList,
-  Tree,
-  MultiTab,
-  Result,
-  IconSelector,
-  ThemeFile
-}

src/views/interface/ThemeEdit.vue

@@ -1,26 +1,38 @@
 <template>
-  <div class="page-header-index-wide">
+  <span class="page-header-index-wide">
     <a-row :gutter="12">
-      <a-col :xl="18" :lg="18" :md="18" :sm="24" :xs="24">
+      <a-col
+        :xl="18"
+        :lg="18"
+        :md="18"
+        :sm="24"
+        :xs="24"
+      >
         <a-card hoverable>
           <codemirror :value="value"></codemirror>
         </a-card>
       </a-col>
-      <a-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
+      <a-col
-        <a-card hoverable title="Anatole 主题">
+        :xl="6"
-          <a-directory-tree multiple @select="onSelect" @expand="onExpand">
+        :lg="6"
-            <theme-file :list="files"></theme-file>
+        :md="6"
-          </a-directory-tree>
+        :sm="24"
-          <!-- <theme-file :list="files"></theme-file> -->
+        :xs="24"
+      >
+        <a-card
+          hoverable
+          title="Anatole 主题"
+        >
+          <theme-file :files="files" />
         </a-card>
       </a-col>
     </a-row>
-  </div>
+  </span>
 </template>
 
 <script>
 import themeApi from '@/api/theme'
-import ThemeFile from '@/components/Tree/ThemeFile'
+import ThemeFile from './components/ThemeFile'
 import { codemirror } from 'vue-codemirror-lite'
 export default {
   components: {

src/views/interface/components/ThemeFile.vue

@@ -0,0 +1,52 @@
+<script>
+export default {
+  name: 'ThemeFile',
+  props: {
+    files: {
+      type: Array,
+      required: false,
+      default: () => []
+    }
+  },
+  methods: {
+    renderNode(h, file) {
+      if (file.node && file.node.length) {
+        return h(
+          'a-tree-node',
+          {
+            props: {
+              key: file.path,
+              title: file.name,
+              isLeaf: file.isFile
+            }
+          },
+          file.node.map(child => {
+            return this.renderNode(h, child)
+          })
+        )
+      }
+      return h('a-tree-node', {
+        props: {
+          key: file.path,
+          title: file.name,
+          isLeaf: file.isFile
+        }
+      })
+    }
+  },
+  render(h) {
+    if (this.files.length) {
+      return h(
+        'a-directory-tree',
+        this.files.map(file => {
+          return this.renderNode(h, file)
+        })
+      )
+    }
+    return h('p', 'No files')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>