fix

909e9c27 · 郭维嘉 · 348f5eb4 · 909e9c27 · 909e9c27 · 909e9c27
7 changed file
--- a/build/static/index.css
+++ b/build/static/index.css
--- a/build/static/index.js
+++ b/build/static/index.js
-import{r as f,o as n,c as r,a as i,F as p,b as _,d as b,w as u,e as k,n as v,f as m,t as g,g as T,T as q,h as C,i as N,j as M}from"./vendor.js";const P=function(){const a=document.createElement("link").relList;if(a&&a.supports&&a.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))c(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const l of t.addedNodes)l.tagName==="LINK"&&l.rel==="modulepreload"&&c(l)}).observe(document,{childList:!0,subtree:!0});function d(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerpolicy&&(t.referrerPolicy=e.referrerpolicy),e.crossorigin==="use-credentials"?t.credentials="include":e.crossorigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function c(e){if(e.ep)return;e.ep=!0;const t=d(e);fetch(e.href,t)}};P();var L=(s,a)=>{for(const[d,c]of a)s[d]=c;return s};const V={data(){return{keyword:"",pageShow:!1,iframeSrc:"",tools:[{icon:"https://gitcode.net/codechina/operation-work/uploads/48886bea190eb24ef4cf0499e589554c/1_cpongo9_1634797583.gif",name:"CSDN",showTag:!0,tag:"new"},{icon:"https://infinityicon.infinitynewtab.com/user-share-icon/6e49210c084629259f22609980c48ecf.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",name:"\u5F85\u529E\u4E8B\u9879",showTag:!0,tag:7},{icon:"https://infinityicon.infinitynewtab.com/assets/weather/code_100.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",name:"\u5929\u6C14",showTag:!0,tag:"26\u2103"},{icon:"https://infinityicon.infinitynewtab.com/user-share-icon/cee009549b352def723ba09d6da4b742.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",name:"\u4EAC\u4E1C",showTag:!0,tag:"99+"},{icon:"https://codechina.csdn.net/uploads/-/system/project/avatar/39/logo-1-s.png?width=108",name:"Gitcode",showTag:!0,tag:"git"},{icon:"https://infinityicon.infinitynewtab.com/user-share-icon/f6ec2e6ee20fe198f81cf620413bc35b.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",name:"\u643A\u7A0B\u7F51",showTag:!0,tag:"hot"},{icon:"https://infinityicon.infinitynewtab.com/user-share-icon/37d396f9975e494b10ac8696d64ebb2a.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",name:"Youtube",showTag:!0,tag:"hot"},{icon:"https://infinityicon.infinitynewtab.com/user-share-icon/11ad5726053067fa842833ff0529b680.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",name:"Github",showTag:!0,tag:"git"},{icon:"https://infinityicon.infinitynewtab.com/user-share-icon/24982e111c555d3a4afc44981627925f.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",name:"\u77E5\u4E4E",showTag:!0,tag:"\u77E5\u4E4E"},{icon:"https://infinityicon.infinitynewtab.com/user-share-icon/2fc65bd66987ba1596324d55c01bddd7.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",name:"\u5FAE\u4FE1",showTag:!0,tag:"23"},{icon:"https://infinityicon.infinitynewtab.com/user-share-icon/8061c93a71355024e801820969e2ecff.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",name:"\u767E\u5EA6\u7F51\u76D8",showTag:!0,tag:"100TB"}],list:[{icon:"https://gitcode.net/uploads/-/system/group/avatar/42/0_csdn.png",title:"\u5168\u5C40\u641C\u7D22",code:1,desc:"\u5728CSDN\u4E2D\u5168\u5C40\u641C\u7D22\u5173\u952E\u8BCD"},{icon:"https://codechina.csdn.net/uploads/-/system/project/avatar/39/logo-1-s.png?width=108",title:"Gitcode",code:2,desc:"\u5728Gitcode\u4E2D\u6839\u636E\u5173\u952E\u8BCD\u641C\u7D22\u76F8\u5173\u9879\u76EE\u6216\u4EE3\u7801"},{icon:"https://img2.baidu.com/it/u=533619884,3358423114&fm=26&fmt=auto",title:"\u535A\u5BA2",code:3,desc:"\u6839\u636E\u5173\u952E\u8BCD\u641C\u7D22CSDN\u76F8\u5173\u535A\u5BA2"},{icon:"https://img0.baidu.com/it/u=3697775148,330223112&fm=253&fmt=auto&app=120&f=PNG?w=208&h=208",title:"\u95EE\u7B54",code:4,desc:"\u5728CSDN\u95EE\u7B54\u4E2D\u63D0\u95EE"}]}},watch:{keyword(s){s||(this.pageShow=!1)}},methods:{clickItem(s){switch(s.code){case 1:this.globalSearch();break;case 2:this.iframeSrc="https://gitcode.net/courses/detail/2/l",this.openPage();break;case 3:this.iframeSrc=`https://so.csdn.net/so/search?q=${this.keyword}&t=blog&u=`,this.openPage();break;case 4:this.iframeSrc=`https://so.csdn.net/so/search?q=${this.keyword}&t=ask&u=`,this.openPage();break}},globalSearch(){this.iframeSrc=`https://so.csdn.net/so/search?q=${this.keyword||""}&t=&u=`,this.openPage()},openPage(){this.pageShow=!0}}},B={class:"tools"},D={class:m(["tool_name"])},G={key:1},j={class:m(["tool_name"])},A=i("img",{src:"https://gitcode.net/uploads/-/system/group/avatar/42/0_csdn.png",alt:"",srcset:""},null,-1),K=[A],O=["src"],F=["onClick"],I=["src"],z={class:"title"},E={class:"desc"};function U(s,a,d,c,e,t){const l=f("el-badge"),x=f("el-input"),y=f("el-card");return n(),r(p,null,[i("div",B,[(n(!0),r(p,null,_(e.tools,(o,h)=>(n(),r("div",{key:h,class:"tool_item",onClick:a[0]||(a[0]=(...w)=>t.globalSearch&&t.globalSearch(...w))},[o.showTag?(n(),k(l,{key:0,value:o.tag},{default:u(()=>[i("div",{style:v({background:`#fff url(${o.icon}) center / cover no-repeat`}),class:m(["tool_icon"])},null,4),i("div",D,g(o.name),1)]),_:2},1032,["value"])):(n(),r("div",G,[i("div",{style:v({background:`#fff url(${o.icon}) center / cover no-repeat`}),class:m(["tool_icon"])},null,4),i("div",j,g(o.name),1)]))]))),128))]),b(y,{shadow:"never",style:{border:"none",padding:"0"}},{default:u(()=>[b(x,{autofocus:"",modelValue:e.keyword,"onUpdate:modelValue":a[2]||(a[2]=o=>e.keyword=o),placeholder:"\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD11111",class:"input-with-select",onKeydown:T(t.globalSearch,["enter"])},{append:u(()=>[i("div",{class:"search_btn",onClick:a[1]||(a[1]=(...o)=>t.globalSearch&&t.globalSearch(...o))},K)]),_:1},8,["modelValue","onKeydown"]),b(q,{name:"fade"},{default:u(()=>[e.keyword||e.pageShow?(n(),k(y,{key:0,class:"result",shadow:"never"},{default:u(()=>[e.pageShow?(n(),r("iframe",{key:0,src:e.iframeSrc,frameborder:"0"},null,8,O)):(n(!0),r(p,{key:1},_(e.list,(o,h)=>(n(),r("div",{class:"res_item",onClick:w=>t.clickItem(o),key:h},[i("img",{src:o.icon,alt:""},null,8,I),i("ul",null,[i("li",z,g(o.title),1),i("li",E,g(o.desc),1)])],8,F))),128))]),_:1})):C("",!0)]),_:1})]),_:1})],64)}var Y=L(V,[["render",U]]);const S=N(Y);S.use(M);S.mount("#app");
+import{o as a,c as r,a as p,n as v,b as x,t as _,F as m,r as b,d as f,e as y,w as g,f as h,g as q,T as C,h as T,i as F,j as M}from"./vendor.js";const $=function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))u(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const s of t.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&u(s)}).observe(document,{childList:!0,subtree:!0});function l(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerpolicy&&(t.referrerPolicy=e.referrerpolicy),e.crossorigin==="use-credentials"?t.credentials="include":e.crossorigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function u(e){if(e.ep)return;e.ep=!0;const t=l(e);fetch(e.href,t)}};$();var w=(o,n)=>{for(const[l,u]of n)o[l]=u;return o};const N={props:{info:{type:Object,default:()=>{}}},data(){return{}},methods:{gitClick(o){switch(o.type){case 1:window.open("https://gitcode.net/projects/new");break}}}},P={class:x(["app_name"])},j={class:"app_menu"},L=["onClick"];function A(o,n,l,u,e,t){var s,d;return a(),r(m,null,[p("div",{style:v({background:`#fff url(${(s=l.info)==null?void 0:s.icon}) center / cover no-repeat`}),class:x(["app_icon"])},null,4),p("div",P,_((d=l.info)==null?void 0:d.name),1),p("div",j,[(a(!0),r(m,null,b(l.info.subMenu,(c,i)=>(a(),r("div",{class:"menu",style:v({background:`url(${c.icon}) center/cover no-repeat`}),key:i,onClick:k=>t.gitClick(c)},null,12,L))),128))])],64)}var G=w(N,[["render",A],["__scopeId","data-v-487f1192"]]);const V={components:{app:G},data(){return{apps:[{icon:"https://gitcode.net/codechina/operation-work/uploads/48886bea190eb24ef4cf0499e589554c/1_cpongo9_1634797583.gif",name:"CSDN",showTag:!0,tag:"new"},{icon:"https://infinityicon.infinitynewtab.com/user-share-icon/6e49210c084629259f22609980c48ecf.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",name:"\u5F85\u529E\u4E8B\u9879",showTag:!0,tag:7},{icon:"https://infinityicon.infinitynewtab.com/assets/weather/code_100.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",name:"\u5929\u6C14",showTag:!0,tag:"26\u2103"},{icon:"https://infinityicon.infinitynewtab.com/user-share-icon/cee009549b352def723ba09d6da4b742.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",name:"\u4EAC\u4E1C",showTag:!0,tag:"99+"},{icon:"https://codechina.csdn.net/uploads/-/system/project/avatar/39/logo-1-s.png?width=108",name:"Gitcode",showTag:!0,tag:"git",subMenu:[{icon:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F19%2F39%2F40570b09774307e.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638705958&t=2b31b638b2ca256f12794fa7b5e76ef1",name:"\u65B0\u5EFA\u9879\u76EE",type:1},{icon:"http://img2.baidu.com/it/u=2689189425,1285948593&fm=253&app=138&f=JPEG?w=500&h=500",name:"\u514B\u9686\u4ED3\u5E93",type:2},{icon:"http://img0.baidu.com/it/u=4290061247,3369746211&fm=253&app=138&f=JPEG?w=450&h=450",name:"\u65B0\u5EFA\u7B14\u8BB0",type:3}]},{icon:"https://infinityicon.infinitynewtab.com/user-share-icon/f6ec2e6ee20fe198f81cf620413bc35b.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",name:"\u643A\u7A0B\u7F51",showTag:!0,tag:"hot"},{icon:"https://infinityicon.infinitynewtab.com/user-share-icon/37d396f9975e494b10ac8696d64ebb2a.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",name:"Youtube",showTag:!0,tag:"hot"},{icon:"https://infinityicon.infinitynewtab.com/user-share-icon/11ad5726053067fa842833ff0529b680.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",name:"Github",showTag:!0,tag:"git"},{icon:"https://infinityicon.infinitynewtab.com/user-share-icon/24982e111c555d3a4afc44981627925f.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",name:"\u77E5\u4E4E",showTag:!0,tag:"\u77E5\u4E4E"},{icon:"https://infinityicon.infinitynewtab.com/user-share-icon/2fc65bd66987ba1596324d55c01bddd7.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",name:"\u5FAE\u4FE1",showTag:!0,tag:"23"},{icon:"https://infinityicon.infinitynewtab.com/user-share-icon/8061c93a71355024e801820969e2ecff.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",name:"\u767E\u5EA6\u7F51\u76D8",showTag:!0,tag:"100TB"}]}}},B={class:"appList"};function D(o,n,l,u,e,t){const s=f("app"),d=f("el-badge");return a(),r("div",B,[(a(!0),r(m,null,b(e.apps,(c,i)=>(a(),r("div",{key:i,class:"app_item"},[c.showTag?(a(),y(d,{key:0,value:c.tag},{default:g(()=>[h(s,{info:c},null,8,["info"])]),_:2},1032,["value"])):(a(),y(s,{key:1,info:c},null,8,["info"]))]))),128))])}var I=w(V,[["render",D],["__scopeId","data-v-66fd716f"]]);const O={components:{quickApps:I},data(){return{keyword:"",pageShow:!1,iframeSrc:"",list:[{icon:"https://gitcode.net/uploads/-/system/group/avatar/42/0_csdn.png",title:"\u5168\u5C40\u641C\u7D22",code:1,desc:"\u5728CSDN\u4E2D\u5168\u5C40\u641C\u7D22\u5173\u952E\u8BCD"},{icon:"https://codechina.csdn.net/uploads/-/system/project/avatar/39/logo-1-s.png?width=108",title:"Gitcode",code:2,desc:"\u5728Gitcode\u4E2D\u6839\u636E\u5173\u952E\u8BCD\u641C\u7D22\u76F8\u5173\u9879\u76EE\u6216\u4EE3\u7801"},{icon:"https://img2.baidu.com/it/u=533619884,3358423114&fm=26&fmt=auto",title:"\u535A\u5BA2",code:3,desc:"\u6839\u636E\u5173\u952E\u8BCD\u641C\u7D22CSDN\u76F8\u5173\u535A\u5BA2"},{icon:"https://img0.baidu.com/it/u=3697775148,330223112&fm=253&fmt=auto&app=120&f=PNG?w=208&h=208",title:"\u95EE\u7B54",code:4,desc:"\u5728CSDN\u95EE\u7B54\u4E2D\u63D0\u95EE"}]}},watch:{keyword(o){o||(this.pageShow=!1)}},methods:{clickItem(o){switch(o.code){case 1:this.globalSearch();break;case 2:this.iframeSrc="https://gitcode.net/courses/detail/2/l",this.openPage();break;case 3:this.iframeSrc=`https://so.csdn.net/so/search?q=${this.keyword}&t=blog&u=`,this.openPage();break;case 4:this.iframeSrc=`https://so.csdn.net/so/search?q=${this.keyword}&t=ask&u=`,this.openPage();break}},globalSearch(){this.iframeSrc=`https://so.csdn.net/so/search?q=${this.keyword||""}&t=&u=`,this.openPage()},openPage(){this.pageShow=!0}}},E=p("img",{src:"https://gitcode.net/uploads/-/system/group/avatar/42/0_csdn.png",alt:"",srcset:""},null,-1),K=[E],z=["src"],J=["onClick"],U=["src"],Y={class:"title"},H={class:"desc"};function Q(o,n,l,u,e,t){const s=f("quick-apps"),d=f("el-input"),c=f("el-card");return a(),r(m,null,[h(s),h(c,{shadow:"never",style:{border:"none",padding:"0"}},{default:g(()=>[h(d,{autofocus:"",modelValue:e.keyword,"onUpdate:modelValue":n[1]||(n[1]=i=>e.keyword=i),placeholder:"\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD",class:"input-with-select",onKeydown:q(t.globalSearch,["enter"])},{append:g(()=>[p("div",{class:"search_btn",onClick:n[0]||(n[0]=(...i)=>t.globalSearch&&t.globalSearch(...i))},K)]),_:1},8,["modelValue","onKeydown"]),h(C,{name:"fade"},{default:g(()=>[e.keyword||e.pageShow?(a(),y(c,{key:0,class:"result",shadow:"never"},{default:g(()=>[e.pageShow?(a(),r("iframe",{key:0,src:e.iframeSrc,frameborder:"0"},null,8,z)):(a(!0),r(m,{key:1},b(e.list,(i,k)=>(a(),r("div",{class:"res_item",onClick:W=>t.clickItem(i),key:k},[p("img",{src:i.icon,alt:""},null,8,U),p("ul",null,[p("li",Y,_(i.title),1),p("li",H,_(i.desc),1)])],8,J))),128))]),_:1})):T("",!0)]),_:1})]),_:1})],64)}var R=w(O,[["render",Q]]);const S=F(R);S.use(M);S.mount("#app");
--- a/build/static/vendor.js
+++ b/build/static/vendor.js
--- a/index.js
+++ b/index.js
@@ -37,18 +37,29 @@ function createWindow() {
  });
 }

-const dockMenu = Menu.buildFromTemplate([
+const menu = [
  {
    label: "CSDN官网",
    click() {
-      shell.openExternal("http://www.csdn.net")
+      shell.openExternal("http://www.csdn.net");
+    }
+  },
+  {
+    label: "登录/注册",
+    click() {
+      shell.openExternal("https://passport.csdn.net/newlogin?code=mobile");
    }
  },
  {
    label: "帮助文档",
    submenu: [{ label: "使用文档" }, { label: "开发文档" }]
  },
-  { label: "意见反馈" },
+  {
+    label: "意见反馈",
+    click() {
+      shell.openExternal("http://www.csdn.net");
+    }
+  },
  { type: "separator" },
  { label: "偏好设置" },
  { label: "显示/隐藏" },
@@ -60,7 +71,36 @@ const dockMenu = Menu.buildFromTemplate([
      win.close();
    }
  }
-]);
+];
+
+app.setName("ctools");
+
+const macMenu = [
+  {
+    label: app.getName(),
+    submenu: [
+      {
+        label: "本机应用"
+      },
+      {
+        label: "应用市场"
+      }
+    ]
+  },
+  {
+    label: "应用",
+    submenu: [
+      {
+        label: "本机应用"
+      },
+      {
+        label: "应用市场"
+      }
+    ]
+  }
+];
+
+const dockMenu = Menu.buildFromTemplate(menu);

 let tray;
 let ret;
@@ -70,6 +110,7 @@ app
  .then(() => {
    if (process.platform === "darwin") {
      app.dock.setMenu(dockMenu);
+      Menu.setApplicationMenu(Menu.buildFromTemplate(macMenu));
    }
    const icon = nativeImage.createFromPath(
      path.resolve(__dirname, "./build/icons/icon.png")

--- a/src/App.vue
+++ b/src/App.vue
 <template>
  <!-- <el-carousel :autoplay="false" arrow="never" trigger="click" height="120px">
    <el-carousel-item> -->
-  <div class="tools">
-    <template v-for="(item, index) in tools" :key="index">
-      <div class="tool_item" @click="globalSearch">
-        <el-badge v-if="item.showTag" :value="item.tag">
-          <div
-            :style="{
-              background: `#fff url(${item.icon}) center / cover no-repeat`
-            }"
-            :class="['tool_icon']"
-          ></div>
-          <div :class="['tool_name']">
-            {{ item.name }}
-          </div>
-        </el-badge>
-        <div v-else>
-          <div
-            :style="{
-              background: `#fff url(${item.icon}) center / cover no-repeat`
-            }"
-            :class="['tool_icon']"
-          ></div>
-          <div :class="['tool_name']">{{ item.name }}</div>
-        </div>
-      </div>
-    </template>
-  </div>

-  <el-card shadow="never" style="border: none; padding: 0;">
+  <quick-apps></quick-apps>
+  <el-card shadow="never" style="border: none; padding: 0">
    <el-input
      autofocus
      v-model="keyword"
@@ -69,80 +44,14 @@
 </template>

 <script>
+import quickApps from "./components/quick-apps/app-list.vue";
 export default {
+  components: { quickApps },
  data() {
    return {
      keyword: "",
      pageShow: false,
      iframeSrc: "",
-      tools: [
-        {
-          icon: "https://gitcode.net/codechina/operation-work/uploads/48886bea190eb24ef4cf0499e589554c/1_cpongo9_1634797583.gif",
-          name: "CSDN",
-          showTag: true,
-          tag: "new"
-        },
-        {
-          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/6e49210c084629259f22609980c48ecf.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
-          name: "待办事项",
-          showTag: true,
-          tag: 7
-        },
-        {
-          icon: "https://infinityicon.infinitynewtab.com/assets/weather/code_100.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
-          name: "天气",
-          showTag: true,
-          tag: "26℃"
-        },
-        {
-          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/cee009549b352def723ba09d6da4b742.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
-          name: "京东",
-          showTag: true,
-          tag: "99+"
-        },
-        {
-          icon: "https://codechina.csdn.net/uploads/-/system/project/avatar/39/logo-1-s.png?width=108",
-          name: "Gitcode",
-          showTag: true,
-          tag: "git"
-        },
-        {
-          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/f6ec2e6ee20fe198f81cf620413bc35b.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
-          name: "携程网",
-          showTag: true,
-          tag: "hot"
-        },
-        {
-          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/37d396f9975e494b10ac8696d64ebb2a.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
-          name: "Youtube",
-          showTag: true,
-          tag: "hot"
-        },
-        {
-          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/11ad5726053067fa842833ff0529b680.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
-          name: "Github",
-          showTag: true,
-          tag: "git"
-        },
-        {
-          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/24982e111c555d3a4afc44981627925f.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
-          name: "知乎",
-          showTag: true,
-          tag: "知乎"
-        },
-        {
-          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/2fc65bd66987ba1596324d55c01bddd7.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
-          name: "微信",
-          showTag: true,
-          tag: "23"
-        },
-        {
-          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/8061c93a71355024e801820969e2ecff.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
-          name: "百度网盘",
-          showTag: true,
-          tag: "100TB"
-        }
-      ],
      list: [
        {
          icon: "https://gitcode.net/uploads/-/system/group/avatar/42/0_csdn.png",
@@ -248,54 +157,10 @@ body {

 iframe {
  width: 100%;
-  height: 1024px;
+  height: 620px;
  border: none;
 }
-.tools {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  margin: 0 auto;
-  .tool_item {
-    cursor: pointer;
-    position: relative;
-    &:hover {
-      .tool_icon {
-        bottom: 0;
-      }
-      .tool_name,
-      .el-badge__content {
-        opacity: 1;
-        top: 10px;
-      }
-    }
-    .el-badge__content {
-      opacity: 0;
-      transition: all 0.3s;
-      // transition-delay: 0.1s;
-      top: 0px;
-    }
-    .tool_icon {
-      width: 56px;
-      height: 56px;
-      border-radius: 50%;
-      overflow: hidden;
-      position: relative;
-      bottom: -20px;
-      transition: all 0.3s;
-      box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
-      -webkit-app-region: no-drag;
-    }
-    .tool_name {
-      color: #666;
-      font-size: 14px;
-      text-align: center;
-      margin-top: 10px;
-      opacity: 0;
-      transition: all 0.3s;
-    }
-  }
-}
+
 .el-card {
  margin: 0 auto;
  margin-top: 20px;

--- a/src/components/quick-apps/app-list.vue
+++ b/src/components/quick-apps/app-list.vue
+<template>
+  <div class="appList">
+    <template v-for="(item, index) in apps" :key="index">
+      <div class="app_item">
+        <el-badge v-if="item.showTag" :value="item.tag">
+          <app :info="item" />
+        </el-badge>
+        <app v-else :info="item" />
+      </div>
+    </template>
+  </div>
+</template>
+<script>
+import app from "./components/app.vue";
+export default {
+  components: {
+    app
+  },
+  data() {
+    return {
+      apps: [
+        {
+          icon: "https://gitcode.net/codechina/operation-work/uploads/48886bea190eb24ef4cf0499e589554c/1_cpongo9_1634797583.gif",
+          name: "CSDN",
+          showTag: true,
+          tag: "new"
+        },
+        {
+          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/6e49210c084629259f22609980c48ecf.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
+          name: "待办事项",
+          showTag: true,
+          tag: 7
+        },
+        {
+          icon: "https://infinityicon.infinitynewtab.com/assets/weather/code_100.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
+          name: "天气",
+          showTag: true,
+          tag: "26℃"
+        },
+        {
+          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/cee009549b352def723ba09d6da4b742.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
+          name: "京东",
+          showTag: true,
+          tag: "99+"
+        },
+        {
+          icon: "https://codechina.csdn.net/uploads/-/system/project/avatar/39/logo-1-s.png?width=108",
+          name: "Gitcode",
+          showTag: true,
+          tag: "git",
+          subMenu: [
+            {
+              icon: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F19%2F39%2F40570b09774307e.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638705958&t=2b31b638b2ca256f12794fa7b5e76ef1",
+              name: "新建项目",
+              type: 1
+            },
+            {
+              icon: "http://img2.baidu.com/it/u=2689189425,1285948593&fm=253&app=138&f=JPEG?w=500&h=500",
+              name: "克隆仓库",
+              type: 2
+            },
+            {
+              icon: "http://img0.baidu.com/it/u=4290061247,3369746211&fm=253&app=138&f=JPEG?w=450&h=450",
+              name: "新建笔记",
+              type: 3
+            }
+          ]
+        },
+        {
+          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/f6ec2e6ee20fe198f81cf620413bc35b.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
+          name: "携程网",
+          showTag: true,
+          tag: "hot"
+        },
+        {
+          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/37d396f9975e494b10ac8696d64ebb2a.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
+          name: "Youtube",
+          showTag: true,
+          tag: "hot"
+        },
+        {
+          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/11ad5726053067fa842833ff0529b680.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
+          name: "Github",
+          showTag: true,
+          tag: "git"
+        },
+        {
+          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/24982e111c555d3a4afc44981627925f.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
+          name: "知乎",
+          showTag: true,
+          tag: "知乎"
+        },
+        {
+          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/2fc65bd66987ba1596324d55c01bddd7.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
+          name: "微信",
+          showTag: true,
+          tag: "23"
+        },
+        {
+          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/8061c93a71355024e801820969e2ecff.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
+          name: "百度网盘",
+          showTag: true,
+          tag: "100TB"
+        }
+      ]
+    };
+  }
+};
+</script>
+<style lang="less" scoped>
+.appList {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin: 0 auto;
+  :deep(.app_item) {
+    cursor: pointer;
+    position: relative;
+    &:hover {
+      .app_icon {
+        bottom: 0;
+        z-index: 4;
+      }
+      .app_name,
+      .el-badge__content {
+        opacity: 1;
+        top: 10px;
+      }
+      .app_menu {
+        z-index: 3;
+        opacity: 1;
+        .menu {
+          &:nth-child(1) {
+            transform: translate(-80px, 10px);
+          }
+          &:nth-child(2) {
+            transform: translate(-50%, 40px);
+          }
+          &:nth-child(3) {
+            transform: translate(26px, 10px);
+          }
+        }
+      }
+    }
+    .el-badge__content {
+      opacity: 0;
+      transition: all 0.3s;
+      top: 0px;
+      z-index: 4;
+    }
+  }
+}
+</style>
--- a/src/components/quick-apps/components/app.vue
+++ b/src/components/quick-apps/components/app.vue
+<template>
+  <div
+    :style="{
+      background: `#fff url(${info?.icon}) center / cover no-repeat`
+    }"
+    :class="['app_icon']"
+  ></div>
+  <div :class="['app_name']">{{ info?.name }}</div>
+  <div class="app_menu">
+    <div
+      class="menu"
+      :style="{ background: `url(${item.icon}) center/cover no-repeat` }"
+      v-for="(item, index) in info.subMenu"
+      :key="index"
+      @click="gitClick(item)"
+    >
+      <!-- {{ item.name }} -->
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    info: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    gitClick(item) {
+      const type = item.type;
+      switch (type) {
+        case 1:
+          window.open("https://gitcode.net/projects/new");
+          break;
+        case 2:
+          break;
+        case 3:
+          break;
+
+        default:
+          break;
+      }
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.app_icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  overflow: hidden;
+  position: relative;
+  bottom: -20px;
+  transition: all 0.3s;
+  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
+  -webkit-app-region: no-drag;
+  z-index: 2;
+}
+.app_name {
+  color: #666;
+  font-size: 14px;
+  text-align: center;
+  margin-top: 10px;
+  opacity: 0;
+  transition: all 0.3s;
+}
+.app_menu {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transition: all 0.3s;
+  z-index: 1;
+  opacity: 0;
+  .menu {
+    transition: all 0.3s;
+    width: 52px;
+    height: 52px;
+    line-height: 52px;
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    background: #fff;
+    transform: translate(-50%, -50%);
+    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    &:nth-child(1) {
+      transition-delay: 0;
+    }
+    &:nth-child(2) {
+      transition-delay: 0.1s;
+    }
+    &:nth-child(3) {
+      transition-delay: 0.15s;
+    }
+  }
+}
+</style>