refactor: logic of login (#34)

移除登录组件，改为使用 Console 的登录页面，因为目前 Halo 在 2.6 中已经支持了登录之后重定向到某个页面。

/kind improvement

可测试插件：[plugin-comment-widget-1.5.0-SNAPSHOT.jar.zip](https://github.com/halo-sigs/plugin-comment-widget/files/11622679/plugin-comment-widget-1.5.0-SNAPSHOT.jar.zip)


```release-note
重构登录的逻辑，改为统一使用 Console 的登录页面。
```

packages/comment-widget/package.json

@@ -31,15 +31,12 @@
     "./dist/style.css": "./dist/style.css"
   },
   "dependencies": {
-    "@halo-dev/api-client": "^2.4.0",
-    "@halo-dev/components": "^1.3.0",
+    "@halo-dev/api-client": "^2.6.0",
+    "@halo-dev/components": "^1.5.0",
     "@vueuse/components": "8.9.4",
     "@vueuse/core": "8.9.4",
-    "jsencrypt": "^3.3.2",
     "emoji-mart-vue-fast": "^12.0.1",
-    "lodash.clonedeep": "^4.5.0",
-    "qs": "^6.11.0",
-    "uuid": "^9.0.0"
+    "lodash.clonedeep": "^4.5.0"
   },
   "devDependencies": {
     "@iconify-json/mdi": "^1.1.47",

packages/comment-widget/src/components/Form.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { VButton, VAvatar, VLoading } from "@halo-dev/components";
-import LoginModal from "./LoginModal.vue";
 import MdiStickerEmoji from "~icons/mdi/sticker-emoji";
 import MdiSendCircleOutline from "~icons/mdi/send-circle-outline";
 import type {
@@ -51,8 +50,6 @@ const allowAnonymousComments = inject<Ref<boolean | undefined>>(
   "allowAnonymousComments"
 );
 
-const loginModal = ref(false);
-
 const raw = ref("");
 const allowNotification = ref(true);
 const saving = ref(false);
@@ -243,6 +240,20 @@ watchEffect(() => {
     handleSubmit();
   }
 });
+
+// login
+
+const parentDomId = `#comment-${[group?.replaceAll(".", "-"), kind, name]
+  .join("-")
+  .replaceAll(/-+/g, "-")}`;
+
+const loginUrl = `/console/login?redirect_uri=${encodeURIComponent(
+  window.location.href + parentDomId
+)}`;
+
+function handleOpenLoginPage() {
+  window.location.href = loginUrl;
+}
 </script>
 
 <template>
@@ -280,12 +291,12 @@ watchEffect(() => {
           placeholder="网站"
         />
 
-        <div
-          class="cursor-pointer select-none text-xs text-gray-600 transition-all hover:text-gray-900 dark:text-slate-200 dark:hover:text-slate-400"
-          @click="loginModal = true"
+        <a
+          class="select-none text-xs text-gray-600 transition-all hover:text-gray-900 dark:text-slate-200 dark:hover:text-slate-400"
+          :href="loginUrl"
         >
           （已有该站点的账号）
-        </div>
+        </a>
       </div>
 
       <div class="flex items-center justify-between">
@@ -303,7 +314,7 @@ watchEffect(() => {
             <VButton size="sm" @click="handleLogout">注销</VButton>
           </template>
           <template v-if="!currentUser && !allowAnonymousComments">
-            <VButton size="sm" @click="loginModal = true">登录</VButton>
+            <VButton size="sm" @click="handleOpenLoginPage">登录</VButton>
           </template>
         </div>
         <div class="flex flex-row items-center gap-3">
@@ -349,6 +360,5 @@ watchEffect(() => {
         </div>
       </div>
     </div>
-    <LoginModal v-model:visible="loginModal" />
   </div>
 </template>

packages/comment-widget/tsconfig.app.json

@@ -4,6 +4,7 @@
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,
+    "lib": ["esnext"],
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]