新增底部tab页签-TODO。issues:#I3ZL3W

magic-editor/src/console/src/assets/iconfont/iconfont.css

@@ -1,14 +1,18 @@
 @font-face {
-    font-family: 'magic-iconfont';
-    src: url('iconfont.ttf?t=1607593923233') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  font-family: "magic-iconfont"; /* Project id 1928593 */
+  src: url('iconfont.ttf?t=1626489914543') format('truetype');
 }
 
 .ma-icon {
-    font-family: 'magic-iconfont' !important;
-    font-size: 16px;
-    font-style: normal;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  font-family: "magic-iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.ma-icon-todo:before {
+  content: "\e602";
 }
 
 .ma-icon-push:before {
@@ -46,6 +50,7 @@
 .ma-icon-download:before {
   content: "\e659";
 }
+
 .ma-icon-http-api:before {
   content: "\e6e3";
 }

magic-editor/src/console/src/components/layout/magic-options.vue

@@ -28,6 +28,7 @@ import MagicDebug from './magic-debug.vue'
 import MagicLog from './magic-log.vue'
 import MagicSettings from './magic-settings.vue'
 import MagicFunction from './magic-function.vue'
+import MagicTodo from './magic-todo.vue'
 import bus from '@/scripts/bus.js'
 
 export default {
@@ -43,26 +44,27 @@ export default {
         {id: 'request', name: '接口信息', icon: 'parameter', component: MagicRequest},
         {id: 'options', name: '接口选项', icon: 'options', component: MagicOption},
         {id: 'result', name: '执行结果', icon: 'run', component: MagicRun},
-        {id: 'debug', name: '调试信息', icon: 'debug-info', component: MagicDebug},
-        {id: 'log', name: '运行日志', icon: 'log', component: MagicLog},
-        {id: 'setting', name: '全局参数', icon: 'settings', component: MagicSettings}
+        {id: 'debug', name: '调试信息', icon: 'debug-info', component: MagicDebug}
       ],
       functionTabs: [
         {id: 'function', name: '函数信息', icon: 'parameter', component: MagicFunction},
       ],
       apiGroupTabs : [
         {id: 'group', name: '分组信息', icon: 'parameter', component: MagicGroup}
+      ],
+      commonTabs: [
+        {id: 'log', name: '运行日志', icon: 'log', component: MagicLog},
+        {id: 'setting', name: '全局参数', icon: 'settings', component: MagicSettings},
+        {id: 'todo', name: 'TODO', icon: 'todo', component: MagicTodo}
       ]
     }
   },
   mounted() {
-    this.tabs = this.apiTabs
+    this.tabs = this.apiTabs.concat(this.commonTabs)
     bus.$on('api-group-selected', group => {
       this.info = group;
-      if (this.tabs !== this.apiGroupTabs) {
-        this.tabs = this.apiGroupTabs;
-        this.selectedTab = this.tabs[0].id
-      }
+      this.tabs = this.apiGroupTabs.concat(this.commonTabs);
+      this.selectedTab = this.tabs[0].id
     })
     bus.$on('opened', info => {
       if(info.empty){
@@ -87,14 +89,18 @@ export default {
           this.selectedTab = this.tabs[0].id
         }
       }
+      this.tabs = this.tabs.concat(this.commonTabs)
     })
     bus.$on('switch-tab', target => {
-      if(this.apiTabs.some(it => it.id === target)){
-        this.tabs = this.apiTabs;
-      }else if(this.functionTabs.some(it => it.id === target)){
-        this.tabs = this.functionTabs;
-      }else if(this.apiGroupTabs.some(it => it.id === target)){
-        this.tabs = this.apiGroupTabs;
+      if (!this.tabs.some(it => it.id === target)) {
+        if(this.apiTabs.some(it => it.id === target)){
+          this.tabs = this.apiTabs;
+        }else if(this.functionTabs.some(it => it.id === target)){
+          this.tabs = this.functionTabs;
+        }else if(this.apiGroupTabs.some(it => it.id === target)){
+          this.tabs = this.apiGroupTabs;
+        }
+        this.tabs = this.tabs.concat(this.commonTabs)
       }
       this.$set(this, 'selectedTab', target)
       bus.$emit('update-window-size')

magic-editor/src/console/src/components/layout/magic-todo.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="ma-todo">
+    <div class="ma-layout">
+      <div class="not-select ma-sider">
+        <div @click="getTodoList"><i class="ma-icon ma-icon-refresh" /></div>
+      </div>
+      <div class="ma-layout-container" v-show="!showLoading">
+        <div class="ma-header ma-table-row">
+          <div>名称</div>
+          <div>行号：内容</div>
+        </div>
+        <div class="ma-content">
+          <div v-for="(item, key) in todoList" :key="'todo_' + key" class="ma-table-row content-bg" @click="openItem(item)">
+            <div>
+              <i class="ma-svg-icon" v-if="item.type === 1" :class="['request-method-' + item.cache.method]" />
+              <i class="ma-svg-icon" v-if="item.type === 2" :class="['icon-function']" />
+              <label>{{ item.cache.name }}</label>
+              <span>({{ item.cache.path }})</span>
+            </div>
+            <div>
+              <label>&nbsp;{{ item.line }}：</label>
+              <label>{{ item.text }}</label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="loading" v-show="showLoading">
+      <div class="icon">
+        <i class="ma-icon ma-icon-refresh "></i>
+      </div>
+      加载中...
+    </div>
+    <div class="no-data" v-show="!showLoading && (!todoList || todoList.length === 0)">暂无数据</div>
+  </div>
+</template>
+
+<script>
+import request from '@/api/request.js'
+
+export default {
+  name: 'MagicTodo',
+  data() {
+    return {
+      todoList: [],
+      // 是否展示loading
+      showLoading: false
+    }
+  },
+  methods: {
+    getTodoList() {
+      this.showLoading = true
+      request.send('todo').success(data => {
+        this.todoList = data
+        const $parent = this.$parent.$parent.$parent.$refs
+        this.todoList.forEach(item => {
+          let cache
+          if (item.type === 1) {
+            cache = $parent.apiList.getItemById(item.id)
+          } else if (item.type === 2) {
+            cache = $parent.functionList.getItemById(item.id)
+          }
+          item.cache = cache || {}
+        })
+        setTimeout(() => {
+          this.showLoading = false
+        }, 500)
+      })
+    },
+    openItem(item) {
+      const $parent = this.$parent.$parent.$parent.$refs
+      if (item.type === 1) {
+        $parent.apiList.openItemById(item.id)
+      } else if (item.type === 2) {
+        $parent.functionList.openItemById(item.id)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.ma-todo {
+  background: var(--background);
+  height: 100%;
+  width: 100%;
+  position: relative;
+  outline: 0;
+}
+
+.ma-todo .ma-layout {
+  height: 100%;
+}
+
+.ma-todo .ma-layout .ma-content .content-bg {
+  cursor: pointer;
+}
+
+.ma-todo .ma-layout .ma-content .content-bg span {
+  color: var(--toolbox-list-span-color);
+}
+
+.ma-todo .ma-layout .ma-content .content-bg:nth-child(even) {
+  background: var(--table-even-background);
+}
+
+.ma-todo .ma-layout .ma-content .content-bg:hover {
+  background: var(--table-hover-background);
+}
+
+.ma-layout .ma-sider {
+  border: none;
+  border-right: 1px solid var(--tab-bar-border-color);
+}
+
+.ma-layout .ma-table-row > * {
+  width: 30% !important;
+  background: none;
+}
+
+.ma-layout .ma-table-row > *:last-child {
+  width: 70% !important;
+}
+
+.ma-todo .loading i {
+  color: var(--color);
+  font-size: 20px;
+}
+.ma-todo .loading .icon {
+  width: 20px;
+  margin: 0 auto;
+  animation: rotate 1s linear infinite;
+}
+.ma-todo .loading {
+  color: var(--color);
+  position: absolute;
+  text-align: center;
+  width: 100%;
+  top: 50%;
+  margin-top: -20px;
+}
+.ma-todo .no-data {
+  color: var(--color);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -20px;
+}
+</style>