工作实践体系
samyzh
2023-11-17

内部导航页系统

# 背景

公司系统越来越多，查找想要的系统，要通过浏览器收藏或者笔记来查找非常麻烦，想做个内网的导航页方便开发/测试人员快速进入系统，提高工作效率；

# 自己全栈实现

一期功能

# 管理接口

# 表结构设计

# 技术栈

  • eggjs + mysql + apidoc

# 后台管理功能

# 功能模块

  • 用户管理
  • Tab管理；公共/各部门
  • 分类管理
  • 链接管理
  • 登录功能；

# 技术栈

  • vue3.x + vite2.x + ant-design-vue2.x

# 导航页

# 功能模块

  • 单页面显示

# 技术栈

vue3 + ssr

# 第三方结合cloudflare实现

# 对标

image-20210508191250022

image-20210508191457595

# 程序安装

# 快速安装

  1. 在 Cloudflare Worker (opens new window) 管理页面创建一个新的 Worker 。
  2. 在Worker编辑页面左边粘贴 index.js 中的代码。
  3. 根据自身需要修改 config 的配置内容

# 进阶安装

如何绑定自己的域名

  1. 根据上文快速安装完成，回到域名管理面板
  2. 点击 Workers 进入Workers管理页面
  3. 点击 Add route 设置新的路由
  4. Route 可以输入自己想使用的子域名，如果在根域名上使用直接把当前域名输入即可，Worker 选择上文快速安装好的Worker

Route 所使用的域名地址必须已经解析好A记录，如果没有能绑定的IP地址，可以输入8.8.8.8占位：）

# 系统配置

CF-Worker-Dir允许用户自定义导航页面，配置内容如下：

/**
 *  自定义网站配置 
 */
const config = {
  title: "xx | 数据智能BDP",                 //write your website title
  subtitle: "xx", //write your website subtitle
  logo_icon: "globe",               //select your logo by semantic-ui icon (you can get more msg in:https://semantic-ui.com/elements/icon.html)
  hitokoto: true,                     //use hitokoto or not
  search:true,                        //enable search function
  selling_ads:false,
  search_engine:[ 
    {
      name:"百 度",
      template:"https://www.baidu.com/s?wd=$s"
    },
    {
      name:"必 应",
      template:"https://www.bing.com/search?q=$s"
    },                    //choose search engine which you use
    {
      name:"谷 歌",
      template:"https://www.google.com/search?q=$s"
    },
    {
      name:"搜 狗",
      template:"https://www.sogou.com/web?query=$s"
    }
  ],
  lists: [                            //Url list
    {
      name:"办公日常",
      //icon:"graduation cap",
      list:[
        {
          url:"https://zmp.xx.com/Login.jsp",
          name:"ZMP",
          desc:"办公工时工单"
        },
        {
          url:"https://mail.xx.com/",
          name:"OA邮箱",
          desc:"邮箱办公"
        },
        {
          url:"http://gitlab.xx.com/users/sign_in",
          name:"Gitlab",
          desc:"代码仓库"
        },
        {
          url:"http://10.45.80.xx/portal/",
          name:"ZCM",
          desc:"CI/CD构建"
        },
      ]
    },
    {
      name:"管理平台",
      //icon:"code",
      list:[
        {
          url:"http://172.21.72.xx:8559/",
          name:"167环境",
          desc:"167环境"
        },
        {
          url:"http://172.16.68.xx:8559/",
          name:"31环境",
          desc:"31环境"
        },
        {
          url:"http://10.45.46.xx:9001/",
          name:"116环境",
          desc:"116环境"
        },
        {
          url:"http://10.45.47.xx:8080/login/",
          name:"Jenkins",
          desc:"Jenkins"
        },
      ]
    }
  ]
}
const el = (tag, attrs, content) => `<${tag} ${attrs.join(" ")}>${content}</${tag}>`;

async function handleRequest(request) {
  const init = {
    headers: {
      'content-type': 'text/html;charset=UTF-8',
    },
  }
  return new Response(renderHTML(renderIndex(), null), init);
}
addEventListener('fetch', event => {
  return event.respondWith(handleRequest(event.request))
})

/*通过分析链接 实时获取favicon
* @url 需要分析的Url地址
*/
function getFavicon(url){
  if(url.match(/https{0,1}:\/\//)){
    //return "https://ui-avatars.com/api/?bold=true&size=36&background=0D8ABC&color=fff&rounded=true&name=" + url.split('//')[1];
    return "https://www.google.cn/s2/favicons?sz=64&domain_url=" + url;
  }else{
    //return "https://ui-avatars.com/api/?bold=true&size=36&background=0D8ABC&color=fff&rounded=true&name=" + url;
    return "https://www.google.cn/s2/favicons?sz=64&domain_url=http://" + url;
  } 
}

/** Render Functions
 *  渲染模块函数
 */

function renderIndex(){
  // const footer = el('footer',[],el('div',['class="footer"'],'Powered by' + el('a',['class="ui label"','href="https://github.com/sleepwood/cf-worker-dir"','target="_blank"'],el('i',['class="github icon"'],"") + 'Cf-Worker-Dir') + ' &copy; Base on ' + el('a',['class="ui label"'],el('i',['class="balance scale icon"'],"") + 'MIT License')));
  return renderHeader() + renderMain() //+ footer;
}

function renderHeader(){
  const item = (template,name) => el('a',['class="item"',`data-url="${template}"`],name);

  var nav = el('div',['class="ui large secondary inverted menu"'],el('div',['class="item"'],el('p',['id="hitokoto"'],'BDP运维导航')))
  var title = el('h1',['class="ui inverted header"'],el('i',[`class="${config.logo_icon} icon"`],"") + el('div',['class="content"'],config.title + el('div',['class="sub header"'],config.subtitle)));
  var menu = el('div',['id="sengine"','class="ui bottom attached tabular inverted secondary menu"'],el('div',['class="header item"'],'&nbsp;') + config.search_engine.map((link,key) =>{
    if(key == 0){
      return el('a',['class="active item"',`data-url="${link.template}"`],link.name);
    }else{
      return item(link.template,link.name);
    }
  }).join(""))
  var input = el('div',['class="ui left corner labeled right icon fluid large input"'],el('div',['class="ui left corner label"'],el('img',['id="search-fav"','class="left floated avatar ui image"','src="https://www.baidu.com/favicon.ico"'],"")) + el('input',['id="searchinput"','type="search"','placeholder="搜索你想要知道的……"','autocomplete="off"'],"") + el('i',['class="inverted circular search link icon"'],""));
  return el('header',[],el('div',['id="head"','class="ui inverted vertical masthead center aligned segment"'],(config.hitokoto ? el('div',['id="nav"','class="ui container"'],nav) : "") + el('div',['id="title"','class="ui text container"'],title + (config.search ? input + menu :"") + `${config.selling_ads ? '<div><a id="menubtn" class="red ui icon inverted button"><i class="heart icon"></i> 喜欢此域名 </a></div>' : ''}`)))
}

function renderMain() {
  var main = config.lists.map((item) => {
    const card = (url,name,desc)=> el('a',['class="card"',`href=${url}`,'target="_blank"'],el('div',['class="content"'],el('img',['class="left floated avatar ui image"',`src=${getFavicon(url)}`],"") + el('div',['class="header"'],name) + el('div',['class="meta"'],desc)));
    const divider = el('h4',['class="ui horizontal divider header"'],el('i',[`class="${item.icon} icon"`],"")+item.name);

    var content = el('div',['class="ui four stackable cards"'],item.list.map((link) =>{
      return card(link.url,link.name,link.desc);
    }).join(""));

    return el('div',['class="ui basic segment"'],divider + content);
  }).join("");
  
  return el('main',[],el('div',['class="ui container"'],main));
}

function renderHTML(index,seller) {
  return `<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta itemprop="name" content="运维导航1"/>
      <meta name="description" itemprop="description" content="运维导航"/>
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>${config.title} - ${config.subtitle}</title>
      <link href="https://cdn.jsdelivr.net/npm/semantic-ui-css@2.4.1/semantic.min.css" rel="stylesheet">
      <link href="https://cdn.jsdelivr.net/gh/sleepwood/cf-worker-dir@0.1.1/style.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/semantic-ui-css@2.4.1/semantic.min.js"></script>
  </head>
  <body>
    ${index}
    ${config.selling_ads ? seller : ''}
    <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
    <script>
      $('#sengine a').on('click', function (e) {
        $('#sengine a.active').toggleClass('active');
        $(e.target).toggleClass('active');
        $('#search-fav').attr('src',$(e.target).data('url').match(`+/https{0,1}:\/\/\S+\//+`)[0] + '/favicon.ico') ;
      });
      $('.search').on('click', function (e) {
          var url = $('#sengine a.active').data('url');
          url = url.replace(`+/\$s/+`,$('#searchinput').val());
          window.open(url);
      });
      /* 鼠标聚焦时，回车事件 */
      $("#searchinput").bind("keypress", function(){
          if (event.keyCode == 13){
          // 触发需要调用的方法
          $(".search").click();
          }
      });
      $('#menubtn').on('click', function (e) {
          $('#seller').modal('show');
      });
    </script>
  </body>

  </html>`
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195

# 参考

https://github.com/sleepwood/cf-worker-dir

上次更新: 2023/11/17, 05:08:20
前端基建管理系统

←

Copyright © 2015-2023 友一升 | yessz
×