feature: comment by github app (#8)

feature: comment by github app

CHANGELOG.md

@@ -1,5 +1,21 @@
 # CHANGELOG
 
+## WIP
+
+### ⭐ Added
+
+1. (Data)新增Config表。
+2. (SidePanel)新增GitHub Oauth登录和GitHub App Install。
+3. 新增manifest key以固定插件id。
+
+### ✏️ Changed
+
+1. (SidePanel)评论功能底层逻辑替换为GitHub Issues并联动Github App,实现查看公司（职位）评论，添加评论。
+
+### 🔨 Dependency
+
+1. Add @iconify/vue ^4.1.2
+
 ## 1.14.0(2024-07-11)
 
 ### ⭐ Added
@@ -12,7 +28,7 @@
 
 ### 🔨 Dependency
 
-1. Add @vue-leaflet/vue-leaflet^0.10.1
+1. Add @vue-leaflet/vue-leaflet ^0.10.1
 2. Add leaflet ^1.9.4
 3. Add @pansy/lnglat-transform ^1.0.3
 

package.json

@@ -40,6 +40,7 @@
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
+    "@iconify/vue": "^4.1.2",
     "@sqlite.org/sqlite-wasm": "3.46.0-build2",
     "@types/chrome": "^0.0.246",
     "@types/webextension-polyfill": "^0.10.7",

src/assets/css/app.css

@@ -245,6 +245,7 @@ div[data-search-sol-meta] {
   justify-content: end;
   font-size: 14px;
   color: #414a60;
+  padding-top: 5px;
 }
 
 .__BOSS_comment_wrapper {
@@ -310,4 +311,200 @@ div[data-search-sol-meta] {
   position: relative;
   padding-left: 20px;
   padding-bottom: 10px;
+}
+
+.__comment_dialog {
+  position: absolute;
+  background-color: white;
+  z-index: 9999;
+  color: black;
+  padding: 6px;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
+}
+
+.__comment_loading {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.6);
+  color: white;
+  border-radius: 5px;
+  flex-direction: column;
+
+  div{
+    color: white;
+  }
+}
+
+.__dialog_normal {
+  width: 400px;
+  height: 400px;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.__dialog_maximize {
+  width: 800px;
+  height: 800px;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.__comment_dialog_title {
+  font-size: 15px;
+  text-align: left;
+  padding: 5px;
+}
+
+.__comment_content {
+  flex: 1;
+  position: relative;
+}
+
+.__comment_menu {
+  display: flex;
+  justify-content: end;
+}
+
+.__comment_menu_button {
+  font-size: 20px;
+  padding: 5px;
+  cursor: pointer;
+}
+
+.__comment_button {
+  cursor: pointer;
+  margin-left: 5px;
+  text-decoration: underline;
+  color: blue;
+  padding-right:5px;
+}
+
+.__comment_empty_content {
+  display: flex;
+  justify-content: center;
+  padding: 20px;
+  font-size: 20px;
+}
+
+.__comment_row {
+  display: flex;
+  margin: 10px;
+  flex-direction: row;
+
+  .__right {
+    flex: 1;
+
+    .__header {
+      display: flex;
+      flex-direction: row;
+      border: 0.5px solid black;
+      border-radius: 5px 5px 0 0;
+    }
+
+    .__time {
+      padding: 5px;
+      padding-left: 10px;
+    }
+
+    .__username {
+      padding: 5px;
+      flex: 1;
+    }
+
+    .__source {
+      padding: 5px;
+    }
+
+    .__content {
+      padding: 10px;
+      border: 0.5px solid black;
+      border-top: 0;
+      border-radius: 0 0 5px 5px;
+    }
+  }
+}
+
+.__comment_submit_button_wrapper {
+  display: flex;
+  justify-content: end;
+  padding: 5px;
+}
+
+.__comment_submit_button {
+  background-color: rgb(205, 198, 0);
+  color: white;
+  padding: 1px 8px;
+  border-radius: 5px;
+  font-size: 15px;
+  cursor: pointer;
+  display: inline-block;
+  margin: 5px;
+  text-wrap: nowrap;
+}
+
+.__comment_submit_content {
+  display: flex;
+  margin: 10px;
+  flex-direction: row;
+
+  .__comment_submit_content_wrapper {
+    flex: 1;
+  }
+
+  .__comment_title_wrapper {
+    display: flex;
+    flex-direction: row;
+    border: 0.5px solid black;
+    border-radius: 5px 5px 0 0;
+
+    .__comment_title {
+      padding: 5px;
+      padding-left: 10px;
+    }
+  }
+
+  .__comment_content_wrapper {
+
+    padding: 10px;
+    border: 0.5px solid black;
+    border-top: 0;
+    border-radius: 0 0 5px 5px;
+
+    .__comment_content_wrapper_content {
+      width: 100%;
+      height: 100px;
+    }
+  }
+}
+
+.__comment_paging_wrapper {
+  display: flex;
+  margin: 10px;
+  flex-direction: row;
+  justify-content: end;
+
+  .__comment_paging_total {
+    padding: 5px;
+    align-content: center;
+  }
+
+  .__comment_paging_button {
+    padding: 5px;
+  }
+}
+
+.__avatar {
+  border-radius: 20px;
+  margin-right: 10px;
+  width: 40px;
+  height: 40px;
 }