@esershnr/artalk-sidebar 1.0.3

package/src/pages/comments.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { artalk } from '../global'
+import { useNavStore } from '../stores/nav'
+import { useUserStore } from '../stores/user'
+
+const wrapEl = ref<HTMLElement>()
+const listEl = ref<HTMLElement>()
+const user = useUserStore()
+const nav = useNavStore()
+const { curtTab } = storeToRefs(nav)
+const { site: curtSite } = storeToRefs(user)
+
+const search = ref('')
+
+onMounted(() => {
+  // 初始化导航条
+  if (user.is_admin) {
+    nav.updateTabs(
+      {
+        all: 'all',
+        pending: 'pending',
+        personal_all: 'personal',
+      },
+      'all',
+    )
+  } else {
+    nav.updateTabs(
+      {
+        all: 'all',
+        mentions: 'mentions',
+        mine: 'mine',
+        pending: 'pending',
+      },
+      'all',
+    )
+  }
+
+  watch(curtTab, (curtTab) => {
+    artalk!.ctx.fetch({
+      offset: 0,
+    })
+  })
+
+  watch(curtSite, (value) => {
+    artalk!.ctx.reload()
+  })
+
+  artalk!.ctx.on('comment-rendered', (comment) => {
+    const pageURL = comment.getData().page_url
+    comment.getRender().setOpenURL(`${pageURL}#atk-comment-${comment.getID()}`)
+  })
+
+  artalk!.ctx.updateConf({
+    listFetchParamsModifier: (params) => {
+      params.site_name = curtSite.value
+
+      let scope = user.is_admin ? 'site' : 'user'
+      let type = curtTab.value
+
+      if (curtTab.value === 'personal_all') {
+        scope = 'user'
+        type = 'all'
+      }
+
+      params.scope = scope
+      params.type = type
+
+      if (search.value) params.search = search.value
+    },
+    scrollRelativeTo: () => wrapEl.value!,
+  })
+
+  artalk!.reload()
+
+  const $el = artalk!.ctx.inject('list').getEl()
+
+  $el.querySelector<HTMLElement>('.atk-list-header')!.style.display = 'none'
+  $el.querySelector<HTMLElement>('.atk-list-footer')!.style.display = 'none'
+
+  listEl.value?.append($el)
+
+  // Comments search
+  nav.enableSearch(
+    (value: string) => {
+      search.value = value
+      artalk!.reload()
+    },
+    () => {
+      if (search.value === '') return
+      search.value = ''
+      artalk!.reload()
+    },
+  )
+})
+</script>
+
+<template>
+  <div ref="wrapEl" class="comments-wrap">
+    <div ref="listEl" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.comments-wrap {
+  :deep(.atk-comment-wrap) {
+    border-bottom: 1px solid var(--at-color-border);
+  }
+}
+</style>

package/src/pages/index.vue

@@ -0,0 +1,33 @@
+<route lang="json">
+{
+  "meta": {
+    "title": "Artalk Sidebar"
+  }
+}
+</route>
+
+<script setup lang="ts">
+import { bootParams } from '../global'
+
+const router = useRouter()
+
+onMounted(() => {
+  if (bootParams.view) {
+    const splitted = bootParams.view.split('|')
+    if (splitted[0]) bootParams.view = splitted[0]
+    if (splitted[1]) bootParams.viewParams = JSON.parse(splitted[1])
+  }
+
+  const LinkMap: { [key: string]: string } = {
+    comments: '/comments',
+    pages: '/pages',
+    sites: '/sites',
+    settings: '/settings',
+  }
+  router.replace(LinkMap[bootParams.view] || '/comments')
+})
+</script>
+
+<template>
+  <div></div>
+</template>

package/src/pages/login.vue

@@ -0,0 +1,245 @@
+<route lang="json">
+{
+  "meta": {
+    "title": "Login - Artalk Sidebar"
+  }
+}
+</route>
+
+<script setup lang="ts">
+import type { ArtalkType } from '@esershnr/artalk'
+import { getArtalk } from '../global'
+import { useUserStore } from '../stores/user'
+
+const router = useRouter()
+const { t } = useI18n()
+
+let userForm = ref({
+  email: '',
+  password: '',
+})
+let version = ref('')
+let buildHash = ref('')
+let loginErr = ref('')
+let userSelector = ref<string[] | null>(null)
+
+onMounted(() => {
+  getArtalk()!
+    .ctx.getApi()
+    .version.getVersion()
+    .then((res) => {
+      version.value = res.data.version
+      buildHash.value = res.data.commit_hash
+    })
+})
+
+function onFocus() {
+  loginErr.value = ''
+}
+
+function login(username?: string) {
+  loginErr.value = ''
+
+  const artalk = getArtalk()
+  if (!artalk) throw new Error('Artalk instance not initialized')
+
+  artalk.ctx
+    .getApi()
+    .user.login({
+      name: username || '',
+      email: userForm.value.email,
+      password: userForm.value.password,
+    })
+    .then((res) => {
+      artalk.ctx.getUser().update({
+        ...res.data.user,
+        token: res.data.token,
+      })
+      useUserStore().sync()
+      router.replace('/')
+    })
+    .catch((e: ArtalkType.FetchError) => {
+      if (e.data?.need_name_select) {
+        userSelector.value = e.data?.need_name_select
+      } else {
+        loginErr.value = e.message || t('loginFailure')
+      }
+    })
+}
+
+function selectUser(username: string) {
+  userSelector.value = null
+  login(username)
+}
+
+const versionInfo = computed(() => {
+  return `v${version.value + (buildHash.value ? ' / ' + buildHash.value : '')}`
+})
+</script>
+
+<template>
+  <div class="login-dialog">
+    <a href="https://artalk.js.org/" target="_blank">
+      <img class="logo" src="../assets/favicon.png" alt="logo" draggable="false" />
+    </a>
+    <form class="login-form" @submit.prevent="login()">
+      <input v-model="userForm.email" type="text" :placeholder="t('email')" @focus="onFocus" />
+      <input
+        v-model="userForm.password"
+        type="password"
+        :placeholder="t('password')"
+        @focus="onFocus"
+      />
+      <div v-if="!!loginErr" class="err-msg atk-fade-in">{{ loginErr }}</div>
+      <button type="submit">{{ t('login') }}</button>
+    </form>
+    <div class="copyright">
+      Powered by
+      <a href="https://artalk.js.org" target="_blank">Artalk</a>
+      ({{ versionInfo }})
+    </div>
+
+    <div v-if="userSelector" class="layer">
+      <div class="user-selector atk-fade-in">
+        <div class="text">{{ t('loginSelectHint') }}</div>
+        <div class="user-list">
+          <div v-for="(u, i) in userSelector" :key="i" class="item" @click="selectUser(u)">
+            {{ u }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.login-dialog {
+  z-index: 11;
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  place-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  background: var(--at-color-bg);
+  width: 100%;
+  height: 100%;
+
+  .logo {
+    user-select: none;
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    margin-bottom: 50px;
+    margin-top: -50px;
+    border-radius: 2px;
+  }
+
+  .copyright {
+    font-size: 13px;
+    color: var(--at-color-meta);
+    position: fixed;
+    height: 30px;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+  }
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  width: 280px;
+
+  input {
+    display: block;
+    border: 0;
+    background: transparent;
+    border-bottom: 1px solid var(--at-color-border);
+    padding: 0 20px;
+    line-height: 40px;
+    margin-bottom: 10px;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  button {
+    color: #fff;
+    background: #6e8392;
+    border-radius: 2px;
+    cursor: pointer;
+    border: 0;
+    line-height: 35px;
+    padding: 0 20px;
+    margin-top: 20px;
+    display: block;
+
+    &:hover {
+      opacity: 0.95;
+    }
+  }
+
+  .err-msg {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0 10px;
+    margin-top: 5px;
+    padding: 0 10px;
+    color: var(--at-color-red);
+
+    &::before {
+      content: '';
+      display: inline-block;
+      vertical-align: bottom;
+      height: 19px;
+      width: 19px;
+      margin-right: 6px;
+      background-size: contain;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-image: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.5 15.8332C12.9978 15.8332 15.8333 12.9976 15.8333 9.49984C15.8333 6.00203 12.9978 3.1665 9.50001 3.1665C6.0022 3.1665 3.16667 6.00203 3.16667 9.49984C3.16667 12.9976 6.0022 15.8332 9.5 15.8332ZM17.4167 9.49984C17.4167 13.8721 13.8723 17.4165 9.5 17.4165C5.12775 17.4165 1.58334 13.8721 1.58334 9.49984C1.58334 5.12758 5.12775 1.58317 9.50001 1.58317C13.8723 1.58317 17.4167 5.12758 17.4167 9.49984ZM8.70834 13.4581L8.70834 11.8748L10.2917 11.8748L10.2917 13.4581L8.70834 13.4581ZM10.2917 5.54148L10.2917 11.0831L8.70834 11.0831L8.70834 5.54148L10.2917 5.54148Z' fill='%23F53F3F'/%3E%3C/svg%3E");
+    }
+  }
+}
+
+.layer {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background: var(--at-color-bg-transl);
+}
+
+.user-selector {
+  z-index: 999;
+  position: fixed;
+  left: 50%;
+  top: 43.5%;
+  transform: translate(-50%, -50%);
+  background: var(--at-color-bg);
+  border: 1px solid var(--at-color-border);
+  padding-bottom: 10px;
+  width: 280px;
+
+  & > .text {
+    font-size: 15px;
+    padding: 15px 20px;
+  }
+
+  .user-list {
+    & > .item {
+      cursor: pointer;
+      padding: 10px 20px;
+      transition: border 0.3s ease;
+      border-left: 2px solid transparent;
+
+      &:hover {
+        border-left: 2px solid #6e8392;
+      }
+    }
+  }
+}
+</style>

package/src/pages/pages.vue

@@ -0,0 +1,309 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import type { ArtalkType } from '@esershnr/artalk'
+import { artalk } from '../global'
+import { useNavStore } from '../stores/nav'
+import { useUserStore } from '../stores/user'
+import Pagination from '../components/Pagination.vue'
+
+const nav = useNavStore()
+const { site: curtSite } = storeToRefs(useUserStore())
+const pages = ref<ArtalkType.PageData[]>([])
+const curtEditPageID = ref<number | null>(null)
+const { t } = useI18n()
+
+const pageSize = ref(20)
+const pageTotal = ref(0)
+const search = ref('')
+const pagination = ref<InstanceType<typeof Pagination>>()
+const showActBarBorder = ref(false)
+const refreshBtn = ref({
+  isRun: false,
+  statusText: '',
+})
+
+onMounted(() => {
+  nav.updateTabs(
+    {
+      all: 'all',
+    },
+    'all',
+  )
+
+  // Users search
+  nav.enableSearch(
+    (value: string) => {
+      search.value = value
+      fetchPages(0)
+    },
+    () => {
+      if (search.value === '') return
+      search.value = ''
+      fetchPages(0)
+    },
+  )
+
+  fetchPages(0)
+
+  // Refresh task status recovery
+  getRefreshTaskStatus().then((d) => {
+    if (d.is_progress === true) {
+      refreshBtn.value.isRun = true
+      refreshBtn.value.statusText = d.msg
+      startRefreshTaskWatchdog()
+    }
+  })
+})
+
+watch(curtSite, () => {
+  pagination.value?.reset()
+  fetchPages(0)
+})
+
+onMounted(() => nav.scrollableArea?.addEventListener('scroll', scrollHandler))
+onUnmounted(() => nav.scrollableArea?.removeEventListener('scroll', scrollHandler))
+
+function scrollHandler() {
+  showActBarBorder.value = nav.scrollableArea!.scrollTop > 10
+}
+
+function editPage(page: ArtalkType.PageData) {
+  curtEditPageID.value = page.id
+}
+
+function fetchPages(offset: number) {
+  if (offset === 0) pagination.value?.reset()
+  nav.setPageLoading(true)
+  artalk?.ctx
+    .getApi()
+    .pages.getPages({
+      site_name: curtSite.value,
+      offset: offset,
+      limit: pageSize.value,
+      search: search.value,
+    })
+    .then((res) => {
+      pageTotal.value = res.data.count
+      pages.value = res.data.pages
+      nav.scrollPageToTop()
+    })
+    .finally(() => {
+      nav.setPageLoading(false)
+    })
+}
+
+function onChangePage(offset: number) {
+  fetchPages(offset)
+}
+
+function onPageItemUpdate(page: ArtalkType.PageData) {
+  const index = pages.value.findIndex((p) => p.id === page.id)
+  if (index != -1) {
+    const orgPage = pages.value[index]
+    Object.keys(page).forEach((key) => {
+      ;(orgPage as any)[key] = (page as any)[key]
+    })
+  }
+}
+
+function onPageItemRemove(id: number) {
+  const index = pages.value.findIndex((p) => p.id === id)
+  pages.value.splice(index, 1)
+}
+
+async function getRefreshTaskStatus() {
+  return (await artalk!.ctx.getApi().pages.getPageFetchStatus()).data
+}
+
+function startRefreshTaskWatchdog() {
+  // TODO: Not perfect polling update status
+  const timerID = window.setInterval(async () => {
+    const d = await getRefreshTaskStatus()
+
+    if (d.is_progress === false) {
+      clearInterval(timerID)
+      setRefreshTaskDone()
+      return
+    }
+
+    refreshBtn.value.statusText = d.msg
+  }, 1000)
+}
+
+function setRefreshTaskDone() {
+  refreshBtn.value.statusText = t('updateComplete')
+  window.setTimeout(() => {
+    refreshBtn.value.isRun = false
+  }, 1500)
+}
+
+async function refreshAllPages() {
+  if (refreshBtn.value.isRun) return
+  refreshBtn.value.isRun = true
+  refreshBtn.value.statusText = t('updateReady')
+
+  try {
+    await artalk!.ctx.getApi().pages.fetchAllPages({
+      site_name: curtSite.value,
+    })
+  } catch (err: any) {
+    alert(err.msg)
+    setRefreshTaskDone()
+    return
+  }
+
+  startRefreshTaskWatchdog()
+}
+
+function cacheFlush() {
+  artalk!.ctx
+    .getApi()
+    .cache.flushCache()
+    .then((res) => alert(res.data.msg))
+    .catch(() => alert(t('opFailed')))
+}
+
+function cacheWarm() {
+  artalk!.ctx
+    .getApi()
+    .cache.warmUpCache()
+    .then((res) => alert(res.data.msg))
+    .catch(() => alert(t('opFailed')))
+}
+
+function openPage(url: string) {
+  window.open(url)
+}
+</script>
+
+<template>
+  <div class="atk-page-list-wrap">
+    <div class="atk-header-action-bar" :class="{ bordered: showActBarBorder }">
+      <span class="atk-update-all-title-btn" @click="refreshAllPages()">
+        <i class="atk-icon atk-icon-sync" :class="{ 'atk-rotate': refreshBtn.isRun }"></i>
+        <span class="atk-text">
+          {{ refreshBtn.isRun ? refreshBtn.statusText : t('updateTitle') }}
+        </span>
+      </span>
+      <span class="atk-cache-flush-all-btn" @click="cacheFlush()">
+        <span class="atk-text">{{ t('cacheClear') }}</span>
+      </span>
+      <span class="atk-cache-warm-up-btn" @click="cacheWarm()">
+        <span class="atk-text">{{ t('cacheWarm') }}</span>
+      </span>
+    </div>
+    <div class="atk-page-list">
+      <div v-for="page in pages" :key="page.id" class="atk-page-item">
+        <div class="atk-page-main">
+          <div class="atk-title" @click="openPage(page.url)">
+            {{ page.title }}
+          </div>
+          <div class="atk-sub" @click="openPage(page.url)">{{ page.url }}</div>
+        </div>
+        <div class="atk-page-actions">
+          <div class="atk-item atk-edit-btn" @click="editPage(page)">
+            <i class="atk-icon atk-icon-edit"></i>
+          </div>
+        </div>
+        <PageEditor
+          v-if="curtEditPageID === page.id"
+          :page="page"
+          @close="curtEditPageID = null"
+          @update="onPageItemUpdate"
+          @remove="onPageItemRemove"
+        />
+      </div>
+    </div>
+    <Pagination
+      ref="pagination"
+      :page-size="pageSize"
+      :total="pageTotal"
+      :disabled="nav.isPageLoading"
+      @change="onChangePage"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.atk-page-list-wrap {
+  .atk-header-action-bar {
+    position: sticky;
+    top: 0;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    padding: 10px 15px 0 15px;
+    background: var(--at-color-bg);
+    z-index: 10;
+    border-bottom: 1px solid transparent;
+    transition: 0.3s ease-out padding;
+
+    &.bordered {
+      padding-bottom: 10px;
+      border-color: var(--at-color-border);
+    }
+
+    & > span {
+      display: inline-flex;
+      align-items: center;
+      flex-direction: row;
+      padding: 2px 10px;
+      cursor: pointer;
+      font-size: 13px;
+
+      i {
+        display: inline-block;
+        width: 14px;
+        height: 14px;
+        margin-right: 5px;
+
+        &::after {
+          background-color: var(--at-color-meta);
+        }
+      }
+
+      &:hover {
+        background: var(--at-color-bg-grey);
+      }
+    }
+  }
+}
+
+.atk-page-list {
+  .atk-page-item {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    min-height: 120px;
+    align-items: center;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--at-color-border);
+    }
+  }
+
+  .atk-page-main {
+    display: flex;
+    flex-direction: column;
+    flex: auto;
+    padding: 20px 30px;
+
+    .atk-title {
+      color: var(--at-color-font);
+      font-size: 21px;
+      margin-bottom: 10px;
+      cursor: pointer;
+    }
+
+    .atk-sub {
+      color: var(--at-color-sub);
+      font-size: 14px;
+      cursor: pointer;
+    }
+  }
+
+  :deep(.atk-page-actions) {
+    @extend .atk-list-btn-actions;
+  }
+}
+</style>