@esershnr/artalk-sidebar 1.0.3

package/src/pages/settings.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import YAML from 'yaml'
+import { shallowRef } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useNavStore } from '../stores/nav'
+import { artalk } from '../global'
+import settings, { type OptionNode } from '../lib/settings'
+import LoadingLayer from '../components/LoadingLayer.vue'
+
+const nav = useNavStore()
+const router = useRouter()
+const { t } = useI18n()
+const { curtTab } = storeToRefs(nav)
+const isLoading = ref(false)
+const tree = shallowRef<OptionNode>()
+
+onMounted(() => {
+  nav.updateTabs({
+    sites: 'site',
+    transfer: 'transfer',
+  })
+
+  watch(curtTab, (tab) => {
+    if (tab === 'sites') router.replace('/sites')
+    else if (tab === 'transfer') router.replace('/transfer')
+  })
+
+  Promise.all([
+    artalk!.ctx.getApi().settings.getSettingsTemplate(''),
+    artalk!.ctx.getApi().settings.getSettings(),
+  ]).then(([template, custom]) => {
+    const yamlObj = YAML.parseDocument(template.data.yaml)
+    tree.value = settings.init(yamlObj).getTree()
+    // console.log(tree.value)
+    settings.get().setCustoms(custom.data.yaml)
+    settings.get().setEnvs(custom.data.envs)
+  })
+})
+
+function save() {
+  let yamlStr = ''
+  try {
+    yamlStr = settings.get().getCustoms().value?.toString() || ''
+  } catch (err) {
+    alert('YAML export error: ' + err)
+    console.error(err)
+    return
+  }
+
+  // console.log(yamlStr)
+  if (!yamlStr) {
+    alert('YAML export error: data is empty')
+    return
+  }
+
+  if (isLoading.value) return
+  isLoading.value = true
+  artalk!.ctx
+    .getApi()
+    .settings.applySettings({
+      yaml: yamlStr,
+    })
+    .then(() => {
+      alert(t('settingSaved'))
+    })
+    .catch((err) => {
+      console.error(err)
+      alert(t('settingSaveFailed') + ': ' + err)
+    })
+    .finally(() => {
+      isLoading.value = false
+    })
+}
+</script>
+
+<template>
+  <div class="settings">
+    <div class="act-bar">
+      <div class="atk-sidebar-container">
+        <div class="status-text"></div>
+        <button class="save-btn" @click="save()">
+          <i class="atk-icon atk-icon-yes" />
+          {{ t('apply') }}
+        </button>
+      </div>
+      <LoadingLayer v-if="isLoading" />
+    </div>
+    <div v-if="tree" class="pfs">
+      <PreferenceGrp :node="tree" />
+      <div class="notice">{{ t('settingNotice') }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.settings {
+  .notice {
+    font-size: 13px;
+    background: var(--at-color-bg-light);
+    color: var(--at-color-light);
+    border-radius: 2px;
+    text-align: center;
+    padding: 8px 10px;
+    margin-top: 10px;
+    margin-bottom: 20px;
+  }
+
+  .act-bar {
+    z-index: 999;
+    position: fixed;
+    height: 55px;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    background: var(--at-color-bg-transl);
+    border-top: 1px solid var(--at-color-border);
+    padding: 0 20px;
+
+    .atk-sidebar-container {
+      display: flex;
+      height: 100%;
+      align-items: center;
+      justify-content: space-between;
+      flex-direction: row;
+    }
+
+    .status-text {
+      padding: 0 5px;
+      flex: 1;
+    }
+
+    button {
+      font-size: 14px;
+      display: inline-flex;
+      align-items: center;
+      padding: 4px 16px;
+      cursor: pointer;
+      background: transparent;
+      border-radius: 2px;
+      background: #36abcf;
+      color: #fff;
+      border: 0;
+
+      &:active {
+        opacity: 0.9;
+      }
+
+      i {
+        margin-right: 8px;
+
+        &::after {
+          background-color: #fff;
+        }
+      }
+    }
+  }
+
+  .pfs {
+    padding: 10px 30px;
+  }
+
+  :deep(input[type='text']),
+  :deep(input[type='password']),
+  :deep(select) {
+    font-size: 17px;
+    width: 100%;
+    height: 35px;
+    padding: 3px 5px;
+    border: 0;
+    border-bottom: 1px solid var(--at-color-border);
+    outline: none;
+    background: transparent;
+    -webkit-appearance: none;
+    border-radius: 0;
+
+    &:focus {
+      border-bottom-color: var(--at-color-main);
+    }
+  }
+}
+</style>

package/src/pages/sites.vue

@@ -0,0 +1,353 @@
+<script setup lang="ts">
+import type { ArtalkType } from '@esershnr/artalk'
+import { useNavStore } from '../stores/nav'
+import { artalk, bootParams } from '../global'
+
+const nav = useNavStore()
+const sites = ref<ArtalkType.SiteData[]>([])
+const curtEditSite = ref<ArtalkType.SiteData | null>(null)
+const showSiteCreate = ref(false)
+const siteCreateInitVal = ref()
+const { t } = useI18n()
+
+onMounted(() => {
+  nav.updateTabs({}, 'sites')
+
+  nav.setPageLoading(true)
+  artalk?.ctx
+    .getApi()
+    .sites.getSites()
+    .then((res) => {
+      sites.value = res.data.sites
+    })
+    .finally(() => {
+      nav.setPageLoading(false)
+    })
+
+  // Open site create dialog by view params (from URL query)
+  const vp = bootParams.viewParams
+  if (vp && vp.create_name && vp.create_urls) {
+    siteCreateInitVal.value = { name: vp.create_name, urls: vp.create_urls }
+    showSiteCreate.value = true
+    nextTick(() => {
+      siteCreateInitVal.value = null
+      bootParams.viewParams = null
+    })
+  }
+})
+
+function create() {
+  curtEditSite.value = null
+  showSiteCreate.value = true
+}
+
+const sitesGrouped = computed(() => {
+  if (sites.value.length === 0) return []
+
+  const grp: ArtalkType.SiteData[][] = []
+  let j = -1
+  for (let i = 0; i < sites.value.length; i++) {
+    const item = sites.value[i]
+    if (i % 4 === 0) {
+      // Each row has 4 items
+      grp.push([])
+      j++
+    }
+    grp[j].push(item)
+  }
+  return grp
+})
+
+function edit(site: ArtalkType.SiteData) {
+  showSiteCreate.value = false
+  curtEditSite.value = site
+}
+
+function onNewSiteCreated(siteNew: ArtalkType.SiteData) {
+  sites.value.push(siteNew)
+  showSiteCreate.value = false
+  nav.refreshSites()
+}
+
+function onSiteItemUpdate(site: ArtalkType.SiteData) {
+  const index = sites.value.findIndex((s) => s.id === site.id)
+  if (index != -1) {
+    const orgSite = sites.value[index]
+    Object.keys(site).forEach((key) => {
+      ;(orgSite as any)[key] = (site as any)[key]
+    })
+  }
+  nav.refreshSites()
+}
+
+function onSiteItemRemove(id: number) {
+  const index = sites.value.findIndex((p) => p.id === id)
+  sites.value.splice(index, 1)
+  nav.refreshSites()
+}
+</script>
+
+<template>
+  <div class="atk-site-list">
+    <div class="atk-header">
+      <div class="atk-title">{{ t('siteCount', { count: sites.length }) }}</div>
+      <div class="atk-actions">
+        <div class="atk-item atk-site-add-btn" @click="create()">
+          <i class="atk-icon atk-icon-plus"></i>
+        </div>
+      </div>
+    </div>
+    <SiteCreate
+      v-if="showSiteCreate"
+      :init-val="siteCreateInitVal"
+      @close="showSiteCreate = false"
+      @done="onNewSiteCreated"
+    />
+    <div class="atk-site-rows-wrap">
+      <template v-for="(ss, i) in sitesGrouped" :key="i">
+        <template v-if="curtEditSite !== null">
+          <SiteEditor
+            v-if="!!ss.includes(curtEditSite)"
+            :site="curtEditSite"
+            @close="curtEditSite = null"
+            @update="onSiteItemUpdate"
+            @remove="onSiteItemRemove"
+          />
+        </template>
+        <div class="atk-site-row">
+          <div
+            v-for="site in ss"
+            :key="site.id"
+            class="atk-site-item"
+            :class="{ 'atk-active': curtEditSite === site }"
+            @click="edit(site)"
+          >
+            <div class="atk-site-logo">{{ site.name.substring(0, 1) }}</div>
+            <div class="atk-site-name">{{ site.name }}</div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.atk-site-list {
+  & > .atk-header {
+    display: flex;
+    flex-direction: row;
+    padding: 15px 30px;
+    align-items: center;
+
+    .atk-title {
+      flex: auto;
+      padding-right: 10px;
+    }
+
+    .atk-actions {
+      display: flex;
+      flex-direction: row;
+
+      .atk-item {
+        display: flex;
+        height: 30px;
+        width: 30px;
+        justify-content: center;
+        align-items: center;
+        user-select: none;
+        cursor: pointer;
+        border-radius: 2px;
+
+        &:hover {
+          background: var(--at-color-bg-grey);
+        }
+      }
+    }
+  }
+
+  .atk-site-rows-wrap {
+    position: relative;
+
+    .atk-site-row {
+      display: flex;
+      flex-direction: row;
+      padding: 10px 20px;
+      padding-bottom: 0;
+    }
+
+    .atk-site-item {
+      display: flex;
+      flex-basis: 25%;
+      flex-direction: column;
+      align-items: center;
+      padding-bottom: 5px;
+      user-select: none;
+      cursor: pointer;
+      border: 1px solid transparent;
+
+      .atk-site-logo {
+        margin: 15px;
+        text-align: center;
+        font-size: 20px;
+        height: 65px;
+        width: 65px;
+        line-height: 65px;
+        background: #5b6f7e;
+        color: #fff;
+        border-radius: 4px;
+      }
+
+      .atk-site-name {
+        text-align: center;
+        font-size: 15px;
+        color: var(--at-color-sub);
+        padding: 0 17px;
+        word-break: break-word;
+      }
+
+      &.atk-active {
+        background-color: var(--at-color-bg-grey);
+        border: 1px solid var(--at-color-border);
+        margin-top: -1px;
+        border-radius: 0 0 4px 4px;
+
+        .atk-site-name {
+          color: var(--at-color-deep);
+        }
+      }
+
+      &:hover {
+        .atk-site-name {
+          color: var(--at-color-font);
+        }
+      }
+    }
+  }
+
+  :deep(.atk-site-edit),
+  :deep(.atk-site-add) {
+    position: relative;
+    min-height: 120px;
+    width: 100%;
+    border-top: 1px solid var(--at-color-border);
+    border-bottom: 1px solid var(--at-color-border);
+    margin-bottom: -10px;
+
+    @media (min-width: 1024px) {
+      border-left: 1px solid var(--at-color-border);
+      border-right: 1px solid var(--at-color-border);
+      border-radius: 4px;
+      padding-top: 10px;
+    }
+
+    .atk-header {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 10px 30px 0 35px;
+      justify-content: space-between;
+
+      .atk-site-info {
+        .atk-site-name {
+          cursor: pointer;
+          display: inline-block;
+          font-size: 23px;
+          position: relative;
+          line-height: 1.6em;
+
+          &:after {
+            content: ' ';
+            position: absolute;
+            width: 100%;
+            height: 6px;
+            background: var(--at-color-main);
+            opacity: 0.4;
+            left: 0;
+            bottom: 6px;
+          }
+        }
+
+        .atk-site-urls {
+          display: flex;
+          width: 100%;
+          margin-top: 6px;
+          flex-wrap: wrap;
+          min-height: 23px;
+          margin-bottom: 15px;
+
+          .atk-url-item {
+            background: var(--at-color-bg-grey);
+            color: var(--at-color-font);
+            border-radius: 2px;
+            padding: 0 8px;
+            font-size: 13px;
+            margin-bottom: 3px;
+            margin-right: 3px;
+            cursor: pointer;
+
+            &:hover {
+            }
+          }
+        }
+      }
+
+      .atk-close-btn {
+        width: 50px;
+        height: 50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+
+        &:hover i::after {
+          background-color: var(--at-color-red);
+        }
+      }
+    }
+
+    .atk-main {
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      padding: 0 30px 6px 35px;
+      padding-bottom: 10px;
+
+      .atk-site-text-actions {
+        @extend .atk-list-text-actions;
+        height: 90px;
+        padding: 0;
+        padding-left: 10px;
+
+        .atk-item {
+          margin-bottom: 17px;
+          margin-right: 25px;
+        }
+      }
+
+      .atk-site-btn-actions {
+        @extend .atk-list-btn-actions;
+
+        padding-right: 9px;
+      }
+
+      .atk-item-text-editor-layer {
+        padding: 10px 20px;
+      }
+    }
+  }
+
+  :deep(.atk-site-add) {
+    position: relative;
+
+    .atk-header {
+      .atk-title {
+        font-size: 20px;
+      }
+    }
+
+    .atk-form {
+      padding: 20px 40px;
+    }
+  }
+}
+</style>