artalk 2.1.4 → 2.1.7

package/src/lib/utils.ts

@@ -178,3 +178,28 @@ export function marked(ctx: Context, src: string): string {
 
   return markedInstance.parse(src)
 }
+
+/** 获取修正后的 UserAgent */
+export async function getCorrectUserAgent() {
+  const uaRaw = navigator.userAgent
+  const uaData = (navigator as any).userAgentData // @link https://web.dev/migrate-to-ua-ch/
+  if (!uaData || !uaData.getHighEntropyValues) {
+    return uaRaw
+  }
+
+  // microsoft f******k you!!!!!
+  // @link https://docs.microsoft.com/en-us/microsoft-edge/web-platform/how-to-detect-win11
+  let uaGot: any = null
+  try {
+    uaGot = await uaData.getHighEntropyValues(["platformVersion"])
+  } catch (err) { console.error(err); return uaRaw }
+
+  if (uaData.platform !== "Windows") { return uaRaw }
+  const majorPlatformVersion = Number(uaGot.platformVersion.split('.')[0])
+  if (majorPlatformVersion >= 13) {
+    // Win11 样本："Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36"
+    return uaRaw.replace(/Windows\W+NT\W+10.0/, 'Windows NT 11.0')
+  }
+
+  return uaRaw
+}

package/src/style/_extend.less

@@ -18,83 +18,3 @@
     background: rgba(41,47,53,.77);
   }
 }
-
-.atk-list-text-actions() {
-  display: flex;
-  flex-direction: column;
-  flex: auto;
-  padding: 0 35px;
-  padding-top: 10px;
-  padding-bottom: 0;
-  flex-wrap: wrap;
-  align-content: flex-start;
-
-  .atk-item {
-    position: relative;
-    font-size: 17px;
-    max-width: 5em;
-    display: inline-flex;
-    margin-right: 15px;
-    margin-bottom: 6px;
-    cursor: pointer;
-    user-select: none;
-
-    &.atk-green:after {
-      position: absolute;
-      content: ' ';
-      height: 5px;
-      width: 100%;
-      left: 0;
-      bottom: 5px;
-      background: rgba(50, 199, 134, 0.39);
-    }
-
-    &.atk-yellow:after {
-      position: absolute;
-      content: ' ';
-      height: 5px;
-      width: 100%;
-      left: 0;
-      bottom: 5px;
-      background: rgba(255, 203, 0, 39%);
-    }
-  }
-}
-
-.atk-list-btn-actions() {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0 20px;
-
-  .atk-item {
-    &:hover {
-      background: var(--at-color-bg-grey);
-    }
-
-    &:not(:last-child) {
-      margin-right: 15px;
-    }
-
-    cursor: pointer;
-    user-select: none;
-    display: flex;
-    width: 35px;
-    height: 35px;
-    border-radius: 2px;
-    align-items: center;
-    justify-content: center;
-
-    &.atk-item-close {
-      margin-left: 10px;
-    }
-  }
-
-  .atk-icon {
-    background-color: var(--at-color-meta);
-  }
-
-  .atk-icon-yes {
-    background-color: var(--at-color-main);
-  }
-}

package/src/style/comment.less

@@ -102,6 +102,12 @@
         color: #fff;
       }
 
+      .atk-pinned-badge {
+        .badge();
+        color: #fff;
+        background: #f44336;
+      }
+
       .atk-ua {
         .badge()
       }

package/src/style/list.less

@@ -7,6 +7,72 @@
     padding: 10px 10px 5px 10px;
     border-bottom: 1px solid var(--at-color-border);
 
+    .atk-text {
+      display: inline-block;
+    }
+
+    /* 下拉选择层 */
+    .atk-dropdown-wrap {
+      position: relative;
+      cursor: pointer;
+
+      .atk-arrow-down-icon {
+        cursor: pointer;
+        vertical-align: middle;
+        border-top: 6px solid var(--at-color-grey);
+        border-left: 4px solid transparent;
+        border-right: 4px solid transparent;
+        margin-top: -1px;
+        margin-left: 0.4rem;
+        display: inline-block;
+      }
+
+      &:hover {
+        .atk-dropdown {
+          display: block;
+        }
+      }
+
+      .atk-dropdown {
+        z-index: 888;
+        display: none;
+        height: auto !important;
+        max-height: calc(100vh - 2.7rem);
+        overflow-y: auto;
+        position: absolute;
+        top: 100%;
+        right: 0;
+        width: 100%;
+        background-color: var(--at-color-bg);
+        padding: 0.6rem 0;
+        border: 1px solid var(--at-color-border);
+        text-align: center;
+        border-radius: 0.25rem;
+        white-space: nowrap;
+        margin: 0;
+        list-style: none;
+      }
+
+      .atk-dropdown-item {
+        span, a {
+          display: block;
+          line-height: 2rem;
+          position: relative;
+          border-bottom: none;
+          font-weight: 400;
+          padding: 0 1.5rem;
+
+          &:hover {
+            color: var(--at-color-main);
+          }
+        }
+
+        &.active span, a {
+          color: var(--at-color-main);
+        }
+      }
+    }
+
     .atk-comment-count {
       font-size: 15px;
 

package/src/style/main.less

@@ -248,7 +248,7 @@ i.atk-icon {
     & > .atk-layer-dialog-content {
       .atk-captcha-img {
         cursor: pointer;
-        width: 100px;
+        width: 170px;
         height: auto;
         margin-right: 10px;
         padding-right: 10px;

package/src/style/sidebar-layer.less

@@ -0,0 +1,92 @@
+@header-height: 60px;
+@nav-height: 40px;
+
+.atk-sidebar-layer {
+  @width: 430px;
+  position: fixed;
+  z-index: 99999;
+  top: 0;
+  right: 0;
+  width: @width;
+  height: 100%;
+  background: var(--at-color-bg);
+  transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+  transform: translate(@width, 0px);
+
+  @media only screen and (max-width: @width) {
+    & {
+      width: 100%;
+    }
+  }
+
+  .atk-sidebar-inner {
+    position: relative;
+    height: 100%;
+  }
+
+  // Header
+  .atk-sidebar-header {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    z-index: 99999;
+
+    .atk-sidebar-close {
+      display: flex;
+      flex-direction: column;
+      width: @header-height;
+      height: @header-height;
+      align-items: center;
+      place-content: center;
+      cursor: pointer;
+      user-select: none;
+      margin-left: 10px;
+
+      &:hover .atk-icon-close {
+        background-color: rgba(232, 17, 35, 0.9);
+      }
+    }
+  }
+
+  .atk-sidebar-iframe-wrap {
+    height: 100%;
+    position: relative;
+
+    iframe {
+      border: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    .atk-err-alert {
+      z-index: 9999;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      position: absolute;
+      background: var(--at-color-bg);
+      padding: 40px 30px;
+      width: 80%;
+      text-align: center;
+      border-radius: 4px;
+
+      .atk-title {
+        font-size: 1.4em;
+        margin-bottom: 20px;
+        color: var(--at-color-font);
+      }
+
+      .atk-text {
+        color: var(--at-color-font);
+
+        span {
+          cursor: pointer;
+          color: var(--at-color-main);
+        }
+      }
+    }
+  }
+}

package/types/artalk-config.d.ts

@@ -48,7 +48,7 @@ export default interface ArtalkConfig {
   }
 
   /** 内容限高 */
-  heightLimit: {
+  heightLimit?: {
     /** 评论内容限高 */
     content?: number
 
@@ -62,6 +62,9 @@ export default interface ArtalkConfig {
   /** 评论投票反对按钮 */
   voteDown?: boolean
 
+  /** PV 元素 Selector */
+  pvEl?: string
+
   /** 暗黑模式 */
   darkMode?: boolean
 

package/types/artalk-data.d.ts

@@ -29,6 +29,9 @@ export interface CommentData {
   /** 是否待审 */
   is_pending?: boolean
 
+  /** 是否置顶 */
+  is_pinned?: boolean
+
   /** 是否为管理员 */
   is_admin?: boolean
 

package/vite-common.config.ts

@@ -0,0 +1,15 @@
+import { UserConfigExport } from 'vite'
+import { version } from './package.json'
+
+export default {
+  define: {
+    ARTALK_VERSION: JSON.stringify(version)
+  },
+  css: {
+    preprocessorOptions: {
+      less: {
+         additionalData: `@import "./src/style/_variables.less";@import "./src/style/_extend.less";`
+     },
+    },
+  },
+} as UserConfigExport

package/vite-demo.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+import commonConf from './vite-common.config'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+  build: {
+    target: 'esnext',
+    outDir: resolve(__dirname, "deploy"),
+    rollupOptions: {}
+  },
+  plugins: [tsconfigPaths()],
+  ...commonConf
+})

package/vite.config.ts

@@ -0,0 +1,36 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+import commonConf from './vite-common.config'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+  build: {
+    target: 'es2015',
+    outDir: resolve(__dirname, "dist"),
+    minify: 'terser',
+    lib: {
+      entry: resolve(__dirname, 'src/main.ts'),
+      name: 'Artalk',
+      fileName: (format) => ((format == "umd") ? 'Artalk.js' : `Artalk.${format}.js`),
+      formats: ["es", "umd", "iife"]
+    },
+    rollupOptions: {
+      // 确保外部化处理那些你不想打包进库的依赖
+      external: ['vue'],
+      output: {
+        assetFileNames: assetInfo => {
+          if (/\.css$/.test(assetInfo.name)) {
+            return 'Artalk.css'
+          }
+          return "[name].[ext]"
+        },
+        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
+        globals: {
+          vue: 'Vue'
+        }
+      }
+    }
+  },
+  plugins: [tsconfigPaths()],
+  ...commonConf
+})