完成

src/css/app.css

@@ -1 +1 @@
-html{font-size:12.8px;width:100%;height:100vh}body{display:flex;flex-direction:column;width:100%;height:100%;line-height:1.5;font-size:1.09375rem;color:#62778d;background:rgba(0,0,0,0.75)}
+html{font-size:12.8px;width:100%;height:100vh}body{display:flex;flex-direction:column;width:100%;height:100%;padding-top:.9375rem;line-height:1.25;font-size:1.09375rem;color:#f2f5fc;background:transparent}.app{position:relative;display:flex;flex-direction:column;height:100%;padding:1.25rem 0 .46875rem;border-radius:.46875rem;background:rgba(100,100,100,0.75)}.app::before{position:absolute;left:12.10938rem;top:-.54688rem;width:1.09375rem;height:1.09375rem;border-radius:.15625rem;background:linear-gradient(to bottom right, rgba(100,100,100,0.7) 50%, transparent 50%);-webkit-transform:rotate(45deg);transform:rotate(45deg);content:""}.app .option{position:absolute;right:.46875rem;top:.15625rem;--size: 1.09375rem;cursor:pointer;opacity:0}.app .option:hover{opacity:1}.app .list{flex:1}.app .list .item{display:flex;align-items:center;height:4.21875rem;padding:.78125rem .9375rem;line-height:1.17188rem;border-bottom:.07812rem solid rgba(200,200,200,0.1);border-top:.07812rem solid rgba(0,0,0,0.1)}.app .list .item:first-child{border-top:0}.app .list .item:last-child{border-bottom:0}.app .list .item .info{overflow:hidden;flex:1}.app .list .item .info h3{font-size:1.09375rem}.app .list .item .info cite{color:#dae1e9}.app .list .item .last-week{display:flex;justify-content:space-between;flex-flow:wrap-reverse;width:3.75rem;height:1.95312rem;margin:0 1.25rem}.app .list .item .last-week li{width:.23438rem;height:0;background:#fff}.app .list .item .today{width:4.0625rem;font-size:.9375rem;color:#fff;text-align:right}.app .list .item .today span{display:block;padding:0 .3125rem}.app .list .item .today .percent{border-radius:.15625rem}.app .list .item .today .percent.red{background:#ff5061}.app .list .item .today .percent.green{background:#4caf50}

src/css/app.scss

@@ -13,7 +13,92 @@ html {font-size:12.8px;width:100%;height:100vh;}
 
 body {
   display:flex;flex-direction: column;
-  width:100%;height:100%;line-height:1.5;
+  width:100%;height:100%;
-  font-size:px(14);color:nth($cd, 1);
+  padding-top:px(12);
-  background:rgba(0, 0, 0, .75);
+  line-height:1.25;
+  font-size:px(14);
+  color:nth($cp, 1);
+  background:transparent;
+}
+
+.app {
+  position:relative;
+  display:flex;
+  flex-direction: column;
+  height:100%;
+  padding:px(16) 0 px(6);
+  border-radius:px(6);
+  background:rgba(100, 100, 100, .75);
+
+  &::before {
+    position:absolute;
+    left:px(155); top:px(-7);
+    width:px(14); height:px(14);
+    border-radius:px(2);
+    background: linear-gradient(to bottom right, rgba(100, 100, 100, .7) 50%, transparent 50%);
+    transform:rotate(45deg);
+    content:"";
+  }
+
+  .option {
+    position:absolute;
+    right:px(6);top:px(2);
+    --size: #{px(14)};
+    cursor:pointer;
+    opacity:0;
+
+    &:hover {
+      opacity:1;
+    }
+  }
+
+  .list {
+    flex:1;
+
+    .item {
+      display:flex;
+      align-items:center;
+      height:px(54);
+      padding:px(10) px(12);
+      line-height:px(15);
+      border-bottom:px(1) solid rgba(200, 200, 200, .1);
+      border-top:px(1) solid rgba(0, 0, 0, .1);
+
+      &:first-child {border-top:0;}
+      &:last-child {border-bottom:0;}
+
+      .info {
+        overflow:hidden;
+        flex:1;
+
+        h3 {font-size:px(14);}
+        cite {color:nth($cp, 3);}
+      }
+
+      .last-week {
+        display:flex;
+        justify-content:space-between;
+        flex-flow: wrap-reverse;
+        width:px(48);height:px(25);
+        margin:0 px(16);
+
+        li {width:px(3);height:0;background:#fff;}
+      }
+
+      .today {
+        width:px(52);
+        font-size:px(12);
+        color:#fff;
+        text-align:right;
+
+        span {display:block;padding:0 px(4);}
+        .percent {
+          border-radius:px(2);
+
+          &.red {background:nth($cr, 1);}
+          &.green {background:nth($cg, 3);}
+        }
+      }
+    }
+  }
 }

src/index.html

@@ -9,8 +9,34 @@
   <link href="/css/app.css" rel="stylesheet">
   <script src="/js/app.js" type="module"></script>
 </head>
-<body anot="app" class="do-fn-noselect">
+<body class="do-fn-noselect">
 
+  <div class="app" anot="app">
+    <wc-icon class="option" is="option" @click="addGay"></wc-icon>
+
+    <wc-scroll class="list">
+      <section class="item" :for="it in list">
+        <div class="info"  @dblclick="removeGay(it)">
+          <h3 class="do-fn-ell" :text="it.name"></h3>
+          <cite :text="it.code"></cite>
+        </div>
+        <ul class="last-week">
+          <li 
+            :for="d in it.last"
+            :css="{height: d.h}">
+          </li>
+        </ul>
+        <div class="today" @dblclick="updateGay(it)">
+          <span class="money" :text="it.curr"></span>
+          <span 
+            class="percent" 
+            :class="{red: it.percent > 0, green: it.percent < 0}" 
+            :text="it.percent + '%'">
+          </span>
+        </div>
+      </section>
+    </wc-scroll>
+  </div>
   
   
 </body>

src/js/app.js

@@ -7,7 +7,8 @@
  */
 
 import '/lib/anot.js'
-// import '/lib/request/index.js'
+import '/lib/form/button.js'
+import '/lib/scroll/index.js'
 
 import layer from '/lib/layer/index.js'
 import Utils from '/lib/utils.js'
@@ -20,10 +21,36 @@ const WIN = remote.getCurrentWindow()
 
 const $doc = Anot(document)
 
+function getJsonp(str) {
+  return new Function(`function jsonpgz(d){return d}; return ${str}`)()
+}
+
+function getTableData(str) {
+  var match = str.match(/<tbody[^]*?>.*?<\/tbody>/)
+  var table = document.createElement('table')
+  var list = []
+  var max = 0
+
+  table.innerHTML = match[0]
+  list = Array.from(table.children[0].children).map(it => {
+    let m = +it.children[1].textContent
+    if (m > max) {
+      max = m
+    }
+    return { m }
+  })
+  max = Math.ceil(max)
+  list.forEach(it => {
+    it.h = ((100 * it.m) / max).toFixed(2) + '%'
+  })
+  return list
+}
+
 Anot({
   $id: 'app',
   state: {
-    list: []
+    list: [],
+    $dict: {}
   },
 
   watch: {
@@ -36,17 +63,19 @@ Anot({
   },
   mounted() {
     WIN.on('blur', _ => {
-      // this.focus = false
+      WIN.hide()
-      // this.btns.min = this.btns.close = BTNS_DICT.grey
     })
 
-    // WIN.on('focus', _ => {
+    var watch_list = Anot.ls('watch_list') || '[]'
-    //   this.focus = true
+    if (watch_list) {
-    //   this.btns.min = BTNS_DICT.min
+      watch_list = JSON.parse(watch_list)
-    //   this.btns.close = BTNS_DICT.close
+    }
-    // })
 
-    this.getTodayStat('006736')
+    this.list = watch_list
+
+    for (let it of this.list) {
+      this.$dict[it.code] = it
+    }
   },
   methods: {
     getTodayStat(id) {
@@ -54,11 +83,68 @@ Anot({
         'net',
         `https://fundgz.1234567.com.cn/js/${id}.js`
       )
-      // `http://fund.eastmoney.com/f10/F10DataApi.aspx?type=lsjz&code=006736`
+      return getJsonp(res)
-      log(res)
+    },
-      // fetch(`https://fundgz.1234567.com.cn/js/${id}.js`).then(res => {
+
-      //   log(res)
+    getLastWeek(id) {
-      // })
+      var res = ipcRenderer.sendSync(
+        'net',
+        `https://fund.eastmoney.com/f10/F10DataApi.aspx?type=lsjz&code=${id}`
+      )
+      return getTableData(res)
+    },
+    addGay() {
+      layer
+        .prompt('请输入鸡精代号', (val, done) => {
+          if (val.trim()) {
+            done()
+          }
+        })
+        .then(id => {
+          if (this.$dict[id]) {
+            return
+          }
+          Anot.nextTick(_ => {
+            var info = this.getTodayStat(id)
+            var last = this.getLastWeek(id)
+            if (info) {
+              var tmp = {
+                code: info.fundcode,
+                name: info.name,
+                yesterday: info.dwjz,
+                curr: info.gsz,
+                percent: +info.gszzl,
+                last
+              }
+              this.list.unshift(tmp)
+              this.$dict[tmp.code] = this.list[0]
+              Anot.ls('watch_list', this.list.$model)
+            }
+          })
+        })
+        .catch(Anot.noop)
+    },
+
+    updateGay(item) {
+      var info = this.getTodayStat(item.code)
+      if (info.dwjz !== item.yesterday) {
+        item.last = this.getLastWeek(id)
+      }
+      item.curr = info.gsz
+      item.percent = +info.gszzl
+
+      Anot.ls('watch_list', this.list.$model)
+    },
+
+    removeGay(item) {
+      layer
+        .confirm(`是否移除[${item.name.slice(0, 5)}...]?`)
+        .then(_ => {
+          item.$ups.it.$remove()
+          delete this.$dict[item.code]
+          Anot.ls('watch_list', this.list.$model)
+        })
+        .catch(Anot.noop)
     }
   }
 })

src/lib/css/reset-basic.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /**
  * 
- * @authors yutent (yutent@doui.cc)
+ * @authors yutent (yutent.io@gmail.com)
  * @date    2014-10-10 00:45:09
  *
  * doui的CSS规范
@@ -35,11 +35,11 @@ q::before, q::after {content: '';content: none;}
 table {border-collapse: collapse;border-spacing: 0;}
 a:focus,input,textarea,button:focus,input:focus,textarea:focus {outline:none;}
 ::-moz-focus-inner {
-    border:none;outline:none;
+  border:none;outline:none;
 }
-body {font-family:Helvetica, Arial,"WenQuanYi Micro Hei","PingFang SC","Hiragino Sans GB","Segoe UI", "Microsoft Yahei", sans-serif;-webkit-font-smoothing: antialiased;text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;}
+body {font-family:"Helvetica Neue", Arial,"WenQuanYi Micro Hei","PingFang SC","Hiragino Sans GB","Segoe UI", "Microsoft Yahei", sans-serif;-webkit-font-smoothing: antialiased;text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;}
 code,pre,samp {font-family:Menlo,Monaco,Consolas,"Courier New",monospace;}
-[anot],[\:repeat],[\:if],[is-widget],slot {visibility:hidden;}
+[anot],[\:repeat],[\:if] {visibility:hidden;}
 
 .do-fn-cl { *zoom: 1; }
 .do-fn-cl::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden;} 
@@ -55,6 +55,4 @@ code,pre,samp {font-family:Menlo,Monaco,Consolas,"Courier New",monospace;}
 .do-st-thin {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
 .do-st-hand {cursor:pointer;}
 
-[class^="do-icon-"], [class*=" do-icon-"] {display:inline-block;font-family:"uifont" !important;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
-
 

src/main.js

@@ -59,7 +59,7 @@ protocol.registerSchemesAsPrivileged([
 
 /* ----------------------------------------------------- */
 
-// app.dock.hide()
+app.dock.hide()
 
 //  初始化应用
 app.once('ready', () => {
@@ -74,7 +74,7 @@ app.once('ready', () => {
   // 创建浏览器窗口
   let win = new BrowserWindow({
     title: '',
-    width: 375,
+    width: 320,
     height: 360,
     resizable: false,
     maximizable: false,
@@ -94,7 +94,7 @@ app.once('ready', () => {
     win = null
   })
 
-  win.openDevTools()
+  // win.openDevTools()
 
   // 然后加载应用的 index.html
   win.loadURL('app://local/index.html')
@@ -102,6 +102,7 @@ app.once('ready', () => {
   createMenu(win)
   createTay(win)
 })
+
 ipcMain.on('net', (ev, url) => {
   fetch(url).then(r => {
     ev.returnValue = r

src/tools/tray.js

@@ -15,7 +15,8 @@ module.exports = function(win) {
 
   app.__TRAY__.on('click', _ => {
     var b = app.__TRAY__.getBounds()
-    win.setBounds({ x: b.x - 185, y: b.y + b.height + 4 })
+    win.setBounds({ x: b.x - 150, y: b.y + b.height + 4 })
     win.show()
+    win.focus()
   })
 }