feat:添加商城模板

e92025e5 · 郭维嘉 · 13fc47f0 · e92025e5 · e92025e5 · e92025e5
16 changed file
--- a/build/static/index.8824b6b9.css
+++ b/build/static/index.8824b6b9.css
--- a/build/static/index.b6fb61c3.js
+++ b/build/static/index.b6fb61c3.js
+import{r,o as a,c as u,a as s,n as k,b as $,t as v,F as g,d as y,e as b,w as f,f as _,p as S,g as A,h as C,T,i as E,j as F,k as B}from"./vendor.e985d12c.js";const I=function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))h(e);new MutationObserver(e=>{for(const o of e)if(o.type==="childList")for(const i of o.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&h(i)}).observe(document,{childList:!0,subtree:!0});function l(e){const o={};return e.integrity&&(o.integrity=e.integrity),e.referrerpolicy&&(o.referrerPolicy=e.referrerpolicy),e.crossorigin==="use-credentials"?o.credentials="include":e.crossorigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function h(e){if(e.ep)return;e.ep=!0;const o=l(e);fetch(e.href,o)}};I();var w=(t,n)=>{for(const[l,h]of n)t[l]=h;return t};const G={props:{info:{type:Object,default:()=>{}}},emits:["getAppUrl"],data(){return{}}},z={class:$(["app_name"])},j={class:"app_menu"},N=["onClick"];function P(t,n,l,h,e,o){var p,c;const i=r("el-tooltip");return a(),u(g,null,[s("div",{style:k({background:`#fff url(${(p=l.info)==null?void 0:p.icon}) center / cover no-repeat`}),class:$(["app_icon"])},null,4),s("div",z,v((c=l.info)==null?void 0:c.name),1),s("div",j,[(a(!0),u(g,null,y(l.info.subMenu,(d,m)=>(a(),b(i,{key:m,content:d.name,placement:"bottom",effect:"light"},{default:f(()=>[s("div",{class:"menu",style:k({background:`url(${d.icon}) center/cover no-repeat`}),onClick:x=>t.$emit("getAppUrl",d.url)},null,12,N)]),_:2},1032,["content"]))),128))])],64)}var V=w(G,[["render",P],["__scopeId","data-v-2bb4a6ac"]]);const U={components:{app:V},data(){return{apps:[{icon:"https://gitcode.net/codechina/operation-work/uploads/48886bea190eb24ef4cf0499e589554c/1_cpongo9_1634797583.gif",name:"CSDN",showTag:!0,url:"http://csdn.net",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",url:"",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,url:"http://weathernew.pae.baidu.com/weathernew/pc?query=%E5%8C%97%E4%BA%AC%E5%A4%A9%E6%B0%94&srcid=4982&city_name=%E5%8C%97%E4%BA%AC&province_name=%E5%8C%97%E4%BA%AC",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,url:"http://www.jd.com",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",url:"https://gitcode.net/codechina/operation-work/uploads/a589b9a137d03d953c20b5db8b15f5e9/image.png",type:1},{icon:"http://img2.baidu.com/it/u=2689189425,1285948593&fm=253&app=138&f=JPEG?w=500&h=500",url:"https://gitcode.net/codechina/operation-work/uploads/b568c2f2dd8a2da8f6c9d1987ff228e1/image.png",name:"Issue\u5217\u8868",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",url:"https://gitcode.net/codechina/operation-work/uploads/3d7d50bfbaf7f329f75342650fa2b0f6/image.png",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",url:"https://www.ctrip.com/",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",url:"http://www.youtube.com",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",url:"http://www.github.com",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",url:"https://www.zhihu.com/",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,url:"https://wx.qq.com/",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,url:"https://pan.baidu.com/",tag:"100TB"}]}},methods:{clickApp(t){const n=t.url;!n||window.open(n)}}},L={class:"appList"},O=["onClick"];function K(t,n,l,h,e,o){const i=r("app"),p=r("el-badge");return a(),u("div",L,[(a(!0),u(g,null,y(e.apps,(c,d)=>(a(),u("div",{key:d,class:"app_item",onClick:m=>o.clickApp(c)},[c.showTag?(a(),b(p,{key:0,value:c.tag},{default:f(()=>[_(i,{info:c,onGetAppUrl:n[0]||(n[0]=m=>t.$emit("getAppUrl",m))},null,8,["info"])]),_:2},1032,["value"])):(a(),b(i,{key:1,info:c},null,8,["info"]))],8,O))),128))])}var D=w(U,[["render",K],["__scopeId","data-v-50ea04fd"]]);const W={props:{name:{type:String,default:""}},computed:{src(){return null}}},J=["src"];function R(t,n,l,h,e,o){return a(),u("img",{src:o.src,alt:""},null,8,J)}var Y=w(W,[["render",R]]);const H={components:{icon:Y},data(){return{activeTab:"1"}}},Q=t=>(S("data-v-0966dffc"),t=t(),A(),t),X=Q(()=>s("span",null," \u63D2\u4EF6\u5E02\u573A ",-1));function Z(t,n,l,h,e,o){const i=r("el-tab-pane"),p=r("el-tabs");return a(),b(p,{modelValue:e.activeTab,"onUpdate:modelValue":n[0]||(n[0]=c=>e.activeTab=c)},{default:f(()=>[_(i,{label:"\u63D2\u4EF6\u5E02\u573A",name:"1"},{label:f(()=>[X]),_:1}),_(i,{label:"\u6211\u7684\u63D2\u4EF6",name:"2"}),_(i,{label:"\u504F\u597D\u8BBE\u7F6E",name:"3"}),_(i,{label:"\u8D26\u53F7\u4E0E\u6570\u636E",name:"4"})]),_:1},8,["modelValue"])}var ee=w(H,[["render",Z],["__scopeId","data-v-0966dffc"]]);const te={data(){return{list:[{name:"\u6587\u6863\u7F16\u8F91"},{name:"\u8F6F\u4EF6\u5F00\u53D1"},{name:"\u5F00\u6E90\u534F\u540C"},{name:"\u751F\u4EA7\u5DE5\u5177"}]}}};function ne(t,n,l,h,e,o){const i=r("el-menu-item"),p=r("el-menu");return a(),b(p,{"default-active":"1",class:"el-menu-vertical-demo"},{default:f(()=>[(a(!0),u(g,null,y(e.list,(c,d)=>(a(),b(i,{key:d,index:d+1+""},{default:f(()=>[s("span",null,v(c.name),1)]),_:2},1032,["index"]))),128))]),_:1})}var oe=w(te,[["render",ne],["__scopeId","data-v-54465034"]]);const ae={data(){return{list:[{img:"https://img2.baidu.com/it/u=2971957355,2572097085&fm=26&fmt=auto"},{img:"https://img0.baidu.com/it/u=2854213943,1143863490&fm=26&fmt=auto"},{img:"https://img0.baidu.com/it/u=1978057402,3664391481&fm=26&fmt=auto"}]}}},ie=["src"];function se(t,n,l,h,e,o){const i=r("el-carousel-item"),p=r("el-carousel");return a(),b(p,{trigger:"click",height:"220px"},{default:f(()=>[(a(!0),u(g,null,y(e.list,(c,d)=>(a(),b(i,{key:d},{default:f(()=>[s("img",{src:c.img,alt:""},null,8,ie)]),_:2},1024))),128))]),_:1})}var ce=w(ae,[["render",se],["__scopeId","data-v-582432e8"]]);const re={data(){return{apps:[{icon:"https://gitcode.net/codechina/operation-work/uploads/48886bea190eb24ef4cf0499e589554c/1_cpongo9_1634797583.gif",name:"CSDN",showTag:!0,url:"http://csdn.net",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",url:"",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,url:"http://weathernew.pae.baidu.com/weathernew/pc?query=%E5%8C%97%E4%BA%AC%E5%A4%A9%E6%B0%94&srcid=4982&city_name=%E5%8C%97%E4%BA%AC&province_name=%E5%8C%97%E4%BA%AC",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,url:"http://www.jd.com",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",url:"https://gitcode.net/codechina/operation-work/uploads/a589b9a137d03d953c20b5db8b15f5e9/image.png",type:1},{icon:"http://img2.baidu.com/it/u=2689189425,1285948593&fm=253&app=138&f=JPEG?w=500&h=500",url:"https://gitcode.net/codechina/operation-work/uploads/b568c2f2dd8a2da8f6c9d1987ff228e1/image.png",name:"Issue\u5217\u8868",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",url:"https://gitcode.net/codechina/operation-work/uploads/3d7d50bfbaf7f329f75342650fa2b0f6/image.png",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",url:"https://www.ctrip.com/",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",url:"http://www.youtube.com",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",url:"http://www.github.com",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",url:"https://www.zhihu.com/",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,url:"https://wx.qq.com/",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,url:"https://pan.baidu.com/",tag:"100TB"}]}}},q=t=>(S("data-v-16d618a8"),t=t(),A(),t),le=q(()=>s("h3",null,"\u63A8\u8350",-1)),ue={class:"flex-card app-list"},pe=["src"],de={class:"flex-1"},me={class:"name"},_e=q(()=>s("li",{class:"desc"}," \u8BB0\u5F55\u8BB0\u5F55\u8BB0\u5F55\u8BB0\u5F55\u8BB0\u5F55\u8BB0\u5F55\u8BB0\u5F55\u8BB0\u5F55\u8BB0\u5F55\u8BB0\u5F55\u8BB0\u5F55\u8BB0\u5F55\u8BB0\u5F55\u8BB0\u5F55\u8BB0\u5F55\u8BB0\u5F55\u8BB0\u5F55\u8BB0\u5F55 ",-1));function he(t,n,l,h,e,o){return a(),u(g,null,[le,s("div",ue,[(a(!0),u(g,null,y(e.apps,(i,p)=>(a(),u("div",{class:"app-item flex-card",key:p},[s("img",{src:i.icon,alt:""},null,8,pe),s("ul",de,[s("li",me,v(i.name),1),_e])]))),128))])],64)}var fe=w(re,[["render",he],["__scopeId","data-v-16d618a8"]]);const ge={components:{tabMenu:ee,sideMenu:oe,recommendBanner:ce,listCard:fe},data(){return{searchKeyword:""}}},be={class:"flex-card"},we={class:"side-bar"},ye={class:"flex-1"};function ve(t,n,l,h,e,o){const i=r("tab-menu"),p=r("el-input"),c=r("side-menu"),d=r("recommend-banner"),m=r("list-card");return a(),u(g,null,[_(i),s("div",be,[s("div",we,[_(p,{modelValue:e.searchKeyword,"onUpdate:modelValue":n[0]||(n[0]=x=>e.searchKeyword=x),placeholder:"\u641C\u7D22\u63D2\u4EF6"},null,8,["modelValue"]),_(c)]),s("div",ye,[_(d),_(m)])])],64)}var xe=w(ge,[["render",ve],["__scopeId","data-v-7da94ccd"]]);const ke={components:{quickApps:D,market:xe},data(){return{keyword:"",pageShow:!1,imgShow:!1,iframeSrc:"",imgSrc:"",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(t){t||(this.pageShow=!1,this.imgShow=!1)}},created(){window.addEventListener("contextmenu",t=>{t.preventDefault(),ipcRenderer.send("show-context-menu")}),this.observeWindowSize()},methods:{observeWindowSize(){const t=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver,n=new t(()=>{this.resizeWindowSize()}),l=document.getElementById("app");n.observe(l,{childList:!0,subtree:!0})},resizeWindowSize(){const t=document.body;ipcRenderer.send("resize-window",{width:app.offsetWidth,height:t.offsetHeight})},getAppUrl(t){this.imgSrc=t,this.keyword="Gitcode",this.pageShow=!1,this.imgShow=!0},clickItem(t){switch(t.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=s("img",{src:"https://gitcode.net/uploads/-/system/group/avatar/42/0_csdn.png",alt:"",srcset:""},null,-1),Se=[$e],Ae=["src"],qe={key:1,class:"git_img"},Me=["src"],Ce=["onClick"],Te=["src"],Ee={class:"title"},Fe={class:"desc"};function Be(t,n,l,h,e,o){const i=r("quick-apps"),p=r("el-input"),c=r("market"),d=r("el-card");return a(),u(g,null,[_(i,{onGetAppUrl:o.getAppUrl},null,8,["onGetAppUrl"]),_(d,{shadow:"never",style:{border:"none",padding:"0"}},{default:f(()=>[_(p,{autofocus:"",modelValue:e.keyword,"onUpdate:modelValue":n[1]||(n[1]=m=>e.keyword=m),placeholder:"\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD",class:"input-with-select index-search",onKeydown:C(o.globalSearch,["enter"])},{append:f(()=>[s("div",{class:"search_btn",onClick:n[0]||(n[0]=(...m)=>o.globalSearch&&o.globalSearch(...m))},Se)]),_:1},8,["modelValue","onKeydown"]),_(c),_(T,{name:"fade"},{default:f(()=>[e.keyword||e.pageShow||e.imgShow?(a(),b(d,{key:0,class:"result",shadow:"never"},{default:f(()=>[e.pageShow?(a(),u("iframe",{key:0,src:e.iframeSrc,frameborder:"0"},null,8,Ae)):e.imgShow?(a(),u("div",qe,[s("img",{src:e.imgSrc,alt:""},null,8,Me)])):(a(!0),u(g,{key:2},y(e.list,(m,x)=>(a(),u("div",{class:"res_item",onClick:Ge=>o.clickItem(m),key:x},[s("img",{src:m.icon,alt:""},null,8,Te),s("ul",null,[s("li",Ee,v(m.title),1),s("li",Fe,v(m.desc),1)])],8,Ce))),128))]),_:1})):E("",!0)]),_:1})]),_:1})],64)}var Ie=w(ke,[["render",Be]]);const M=F(Ie);M.use(B);M.mount("#app");
--- a/build/static/index.css
+++ b/build/static/index.css
--- a/build/static/index.js
+++ b/build/static/index.js
--- a/build/static/vendor.e985d12c.js
+++ b/build/static/vendor.e985d12c.js
--- a/build/static/vendor.js
+++ b/build/static/vendor.js
--- a/package.json
+++ b/package.json
@@ -18,9 +18,10 @@
    "ctools"
  ],
  "dependencies": {
+    "@element-plus/icons": "^0.0.11",
+    "electron-squirrel-startup": "^1.0.0",
    "element-plus": "^1.2.0-beta.1",
-    "vue": "^3.2.16",
-    "electron-squirrel-startup": "^1.0.0"
+    "vue": "^3.2.16"
  },
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.61",

--- a/src/App.vue
+++ b/src/App.vue
@@ -8,7 +8,7 @@
      autofocus
      v-model="keyword"
      placeholder="输入搜索关键词"
-      class="input-with-select"
+      class="input-with-select index-search"
      @keydown.enter="globalSearch"
    >
      <template #append>
@@ -21,6 +21,7 @@
        </div>
      </template>
    </el-input>
+    <market />
    <transition name="fade">
      <el-card
        v-if="keyword || pageShow || imgShow"
@@ -53,9 +54,9 @@

 <script>
 import quickApps from "./components/quick-apps/app-list.vue";
-
+import market from "./components/market/index.vue";
 export default {
-  components: { quickApps },
+  components: { quickApps, market },
  data() {
    return {
      keyword: "",
@@ -105,9 +106,6 @@ export default {
      ipcRenderer.send("show-context-menu");
    });
    this.observeWindowSize();
-    // ipcRenderer.on("context-menu-command", (e, command) => {
-    //   // ...
-    // });
  },
  methods: {
    observeWindowSize() {
@@ -125,14 +123,16 @@ export default {
      });
    },
    resizeWindowSize() {
-      const app = document.getElementById("app");
+      // const app = document.getElementById("app");
+      const body = document.body;
      ipcRenderer.send("resize-window", {
        width: app.offsetWidth,
-        height: app.offsetHeight
+        height: body.offsetHeight
      });
    },
    getAppUrl(url) {
      this.imgSrc = url;
+      this.keyword = "Gitcode";
      this.pageShow = false;
      this.imgShow = true;
    },
@@ -171,7 +171,7 @@ export default {
 };
 </script>

-<style lang="less">
+<style lang="scss">
 .fade-enter-active {
  transition: all 0.3s ease;
 }
@@ -186,12 +186,10 @@ export default {

 body {
  margin: 0;
-  padding: 0;
  position: relative;
  background: transparent;
-  overflow-y: hidden;
+  border: 1px solid transparent;
  -webkit-app-region: drag;
-  // background-color: red;
 }
 #app {
  padding: 20px;
@@ -199,8 +197,9 @@ body {
  box-sizing: border-box;
  border-radius: 8px;
  max-width: 850px;
-  margin: 0 auto;
+  margin: 12px auto;
  background: #fff;
+  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
 }

 iframe {
@@ -215,7 +214,7 @@ iframe {
  .el-card__body {
    padding: 0px;
  }
-  .el-input {
+  .el-input.index-search {
    -webkit-app-region: no-drag;
    input {
      height: 52px;
@@ -245,7 +244,6 @@ iframe {
    }
  }
  .result {
-    width: 100%;
    -webkit-app-region: no-drag;
    .el-card__body {
      padding: 0;

--- a/src/assets/style/global.scss
+++ b/src/assets/style/global.scss
+@import "./variable.scss";
+
+.flex-card {
+  display: flex;
+  justify-content: space-between;
+  .flex-1 {
+    flex: 1;
+  }
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+ul,
+li,
+ol {
+  list-style: none;
+}
--- a/src/assets/style/variable.scss
+++ b/src/assets/style/variable.scss
+// @forward "element-plus/theme-chalk/src/common/var.scss" with (
+//   $colors: (
+//     "primary": (
+//       "base": #fc5531,
+//     ),
+//   ),
+// );
+// @use "element-plus/theme-chalk/src/index.scss" as *;
+
+:root {
+  --el-color-primary: #fc5531;
+  --el-color-primary-light-1: #fc6646;
+  --el-color-primary-light-2: #fd775a;
+  --el-color-primary-light-3: #fd886f;
+  --el-color-primary-light-4: #fd9983;
+  --el-color-primary-light-5: #feaa98;
+  --el-color-primary-light-6: #febbad;
+  --el-color-primary-light-7: #feccc1;
+  --el-color-primary-light-8: #feddd6;
+  --el-color-primary-light-9: #ffeeea;
+  --el-color-success: #67c23a;
+  --el-color-success-light: #e1f3d8;
+  --el-color-success-lighter: #f0f9eb;
+  --el-color-warning: #e6a23c;
+  --el-color-warning-light: #faecd8;
+  --el-color-warning-lighter: #fdf6ec;
+  --el-color-danger: #f56c6c;
+  --el-color-danger-light: #fde2e2;
+  --el-color-danger-lighter: #fef0f0;
+  --el-color-error: #f56c6c;
+  --el-color-error-light: #fde2e2;
+  --el-color-error-lighter: #fef0f0;
+}
--- a/src/components/market/components/list-card.vue
+++ b/src/components/market/components/list-card.vue
+<template>
+  <h3>推荐</h3>
+  <div class="flex-card app-list">
+    <div class="app-item flex-card" v-for="(item, index) in apps" :key="index">
+      <img :src="item.icon" alt="" />
+      <ul class="flex-1">
+        <li class="name">{{ item.name }}</li>
+        <li class="desc">
+          记录记录记录记录记录记录记录记录记录记录记录记录记录记录记录记录记录记录
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      apps: [
+        {
+          icon: "https://gitcode.net/codechina/operation-work/uploads/48886bea190eb24ef4cf0499e589554c/1_cpongo9_1634797583.gif",
+          name: "CSDN",
+          showTag: true,
+          url: "http://csdn.net",
+          tag: "new"
+        },
+        {
+          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/6e49210c084629259f22609980c48ecf.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
+          name: "待办事项",
+          url: "",
+          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,
+          url: "http://weathernew.pae.baidu.com/weathernew/pc?query=%E5%8C%97%E4%BA%AC%E5%A4%A9%E6%B0%94&srcid=4982&city_name=%E5%8C%97%E4%BA%AC&province_name=%E5%8C%97%E4%BA%AC",
+          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,
+          url: "http://www.jd.com",
+          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: "新建项目",
+              url: "https://gitcode.net/codechina/operation-work/uploads/a589b9a137d03d953c20b5db8b15f5e9/image.png",
+              type: 1
+            },
+            {
+              icon: "http://img2.baidu.com/it/u=2689189425,1285948593&fm=253&app=138&f=JPEG?w=500&h=500",
+              url: "https://gitcode.net/codechina/operation-work/uploads/b568c2f2dd8a2da8f6c9d1987ff228e1/image.png",
+              name: "Issue列表",
+              type: 2
+            },
+            {
+              icon: "http://img0.baidu.com/it/u=4290061247,3369746211&fm=253&app=138&f=JPEG?w=450&h=450",
+              name: "新建笔记",
+              url: "https://gitcode.net/codechina/operation-work/uploads/3d7d50bfbaf7f329f75342650fa2b0f6/image.png",
+              type: 3
+            }
+          ]
+        },
+        {
+          icon: "https://infinityicon.infinitynewtab.com/user-share-icon/f6ec2e6ee20fe198f81cf620413bc35b.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim",
+          name: "携程网",
+          url: "https://www.ctrip.com/",
+          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",
+          url: "http://www.youtube.com",
+          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",
+          url: "http://www.github.com",
+          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: "知乎",
+          url: "https://www.zhihu.com/",
+          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,
+          url: "https://wx.qq.com/",
+          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,
+          url: "https://pan.baidu.com/",
+          tag: "100TB"
+        }
+      ]
+    };
+  }
+};
+</script>
+<style lang="less" scoped>
+h3 {
+  margin: 20px 0;
+}
+.app-list {
+  flex-wrap: wrap;
+  .app-item {
+    width: 49%;
+    margin-bottom: 28px;
+
+    img {
+      width: 42px;
+      height: 42px;
+      margin-right: 14px;
+      border-radius: 4px;
+      border: 1px solid #e6e6e6;
+    }
+    ul {
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .name {
+        font-weight: bold;
+        font-size: 15px;
+      }
+      .desc {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: 13px;
+        color: #666;
+      }
+    }
+  }
+}
+</style>
--- a/src/components/market/components/recommend-banner.vue
+++ b/src/components/market/components/recommend-banner.vue
+<template>
+  <el-carousel trigger="click" height="220px">
+    <el-carousel-item v-for="(item, index) in list" :key="index">
+      <img :src="item.img" alt="" />
+    </el-carousel-item>
+  </el-carousel>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        {
+          img: "https://img2.baidu.com/it/u=2971957355,2572097085&fm=26&fmt=auto"
+        },
+        {
+          img: "https://img0.baidu.com/it/u=2854213943,1143863490&fm=26&fmt=auto"
+        },
+        {
+          img: "https://img0.baidu.com/it/u=1978057402,3664391481&fm=26&fmt=auto"
+        }
+      ]
+    };
+  }
+};
+</script>
+<style lang="less" scoped>
+.el-carousel {
+  border-radius: 4px;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+</style>
--- a/src/components/market/components/side-menu.vue
+++ b/src/components/market/components/side-menu.vue
+<template>
+  <el-menu default-active="1" class="el-menu-vertical-demo">
+    <el-menu-item
+      v-for="(item, index) in list"
+      :key="index"
+      :index="index + 1 + ''"
+    >
+      <el-icon>
+        <Grid />
+      </el-icon>
+      <span>{{ item.name }}</span>
+    </el-menu-item>
+  </el-menu>
+</template>
+<script>
+import { Grid } from "@element-plus/icons";
+export default {
+  components: { Grid },
+  data() {
+    return {
+      list: [
+        {
+          name: "文档编辑"
+        },
+        {
+          name: "软件开发"
+        },
+        {
+          name: "开源协同"
+        },
+        {
+          name: "生产工具"
+        }
+      ]
+    };
+  }
+};
+</script>
+<style lang="less" scoped>
+.el-menu {
+  margin: 15px 0;
+  border: 1px solid var(--el-menu-border-color);
+  border-radius: 4px;
+  padding: 10px 0;
+  box-sizing: border-box;
+}
+</style>
--- a/src/components/market/components/tab-menu.vue
+++ b/src/components/market/components/tab-menu.vue
+<template>
+  <el-tabs v-model="activeTab">
+    <el-tab-pane label="插件市场" name="1">
+      <template #label>
+        <span>
+          <!-- <el-icon :size="20">
+            <icon name="grid" />
+          </el-icon> -->
+          插件市场
+        </span>
+      </template>
+    </el-tab-pane>
+    <el-tab-pane label="我的插件" name="2"></el-tab-pane>
+    <el-tab-pane label="偏好设置" name="3"></el-tab-pane>
+    <el-tab-pane label="账号与数据" name="4"></el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeTab: "1"
+    };
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.el-tabs {
+  margin-top: 20px;
+  :deep(.el-tabs__nav-wrap)::after {
+    height: 1px;
+  }
+  :deep(.el-tabs__item) {
+    // padding: 0 40px;
+    min-width: 120px;
+    text-align: center;
+  }
+}
+</style>
--- a/src/components/market/index.vue
+++ b/src/components/market/index.vue
+<template>
+  <tab-menu />
+  <div class="flex-card">
+    <div class="side-bar">
+      <el-input v-model="searchKeyword" placeholder="搜索插件" />
+      <side-menu />
+    </div>
+    <div class="flex-1">
+      <recommend-banner />
+      <list-card />
+    </div>
+  </div>
+</template>
+<script>
+import tabMenu from "./components/tab-menu.vue";
+import sideMenu from "./components/side-menu.vue";
+import recommendBanner from "./components/recommend-banner.vue";
+import listCard from "./components/list-card.vue";
+export default {
+  components: { tabMenu, sideMenu, recommendBanner, listCard },
+  data() {
+    return {
+      searchKeyword: ""
+    };
+  }
+};
+</script>
+<style lang="less" scoped>
+.side-bar {
+  width: 200px;
+  margin-right: 15px;
+}
+</style>
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,6 +5,13 @@ import vue from "@vitejs/plugin-vue";
 export default defineConfig({
  base: "./",
  plugins: [vue()],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: '@import "./src/assets/style/global.scss";' // 添加公共样式
+      }
+    }
+  },
  build: {
    rollupOptions: {
      output: {