-
+
- (evt: 'no', value: string): boolean|void|Promise
+ (evt: 'yes', value: string): boolean | void | Promise
+ (evt: 'no', value: string): boolean | void | Promise
(evt: 'close'): void
}>()
-const inputEl = ref(null)
+const inputEl = ref(null)
const inputVal = ref('')
const inputInvalid = ref(false)
@@ -30,13 +30,14 @@ function onInput() {
}
function onKeyUp(evt: KeyboardEvent) {
- if (evt.key === 'Enter' || evt.keyCode === 13) { // 按下回车键
+ if (evt.key === 'Enter' || evt.keyCode === 13) {
+ // 按下回车键
evt.preventDefault()
submit('yes')
}
}
-async function submit(type: 'yes'|'no') {
+async function submit(type: 'yes' | 'no') {
if (type == 'yes' && inputInvalid.value) return
let isContinue: any = undefined
@@ -67,7 +68,7 @@ async function submit(type: 'yes'|'no') {
@input="onInput()"
@keyup="onKeyUp"
:class="{ 'atk-invalid': inputInvalid }"
- >
+ />
-
diff --git a/ui/artalk-sidebar/src/components/LogTerminal.vue b/ui/artalk-sidebar/src/components/LogTerminal.vue
index 6a56a719d..84e428fe6 100644
--- a/ui/artalk-sidebar/src/components/LogTerminal.vue
+++ b/ui/artalk-sidebar/src/components/LogTerminal.vue
@@ -10,7 +10,7 @@ const emit = defineEmits<{
(evt: 'back'): void
}>()
-const logWrapEl = ref(null)
+const logWrapEl = ref(null)
onMounted(() => {
// 创建 iframe
@@ -71,7 +71,8 @@ function back() {
}
}
- .atk-log {}
+ .atk-log {
+ }
.atk-iframe {
width: 100%;
diff --git a/ui/artalk-sidebar/src/components/PageEditor.vue b/ui/artalk-sidebar/src/components/PageEditor.vue
index fc5d16246..4bbea4cc4 100644
--- a/ui/artalk-sidebar/src/components/PageEditor.vue
+++ b/ui/artalk-sidebar/src/components/PageEditor.vue
@@ -13,8 +13,10 @@ const emit = defineEmits<{
}>()
const { page } = toRefs(props)
-const editFieldKey = ref(null)
-const editFieldVal = computed(() => String(editFieldKey ? page.value[editFieldKey.value!] || '' : ''))
+const editFieldKey = ref(null)
+const editFieldVal = computed(() =>
+ String(editFieldKey ? page.value[editFieldKey.value!] || '' : ''),
+)
const isLoading = ref(false)
const { t } = useI18n()
@@ -30,12 +32,19 @@ async function editAdminOnly() {
isLoading.value = true
let p: ArtalkType.PageData
try {
- p = (await artalk!.ctx.getApi().pages.updatePage(page.value.id, { ...page.value, admin_only: !page.value.admin_only })).data
+ p = (
+ await artalk!.ctx.getApi().pages.updatePage(page.value.id, {
+ ...page.value,
+ admin_only: !page.value.admin_only,
+ })
+ ).data
} catch (err: any) {
alert(`修改失败：${err.message || '未知错误'}`)
console.log(err)
return
- } finally { isLoading.value = false }
+ } finally {
+ isLoading.value = false
+ }
emit('update', p)
}
@@ -48,7 +57,9 @@ async function sync() {
alert(`同步失败：${err.message || '未知错误'}`)
console.log(err)
return
- } finally { isLoading.value = false }
+ } finally {
+ isLoading.value = false
+ }
emit('update', p)
}
@@ -61,12 +72,13 @@ function del() {
console.log(err)
alert(`删除失败 ${String(err)}`)
return
- } finally { isLoading.value = false }
+ } finally {
+ isLoading.value = false
+ }
emit('remove', page.value.id)
}
- if (window.confirm(
- `确认删除页面 "${page.value.title || page.value.key}"？将会删除所有相关数据`
- )) del()
+ if (window.confirm(`确认删除页面 "${page.value.title || page.value.key}"？将会删除所有相关数据`))
+ del()
}
function close() {
@@ -78,12 +90,19 @@ async function onFieldEditorYes(val: string) {
isLoading.value = true
let p: ArtalkType.PageData
try {
- p = (await artalk!.ctx.getApi().pages.updatePage(page.value.id, { ...page.value, [editFieldKey.value as any]: val })).data
+ p = (
+ await artalk!.ctx.getApi().pages.updatePage(page.value.id, {
+ ...page.value,
+ [editFieldKey.value as any]: val,
+ })
+ ).data
} catch (err: any) {
alert(`修改失败：${err.message || '未知错误'}`)
console.error(err)
return false
- } finally { isLoading.value = false }
+ } finally {
+ isLoading.value = false
+ }
emit('update', p)
}
@@ -100,13 +119,19 @@ function onFiledEditorNo() {
{{ curtSite.substring(0, 1) || '_' }}
@@ -31,7 +31,7 @@ const userAvatarImgURL = computed(() => {
- ![]()
+ ![]()
@@ -75,7 +75,8 @@ const userAvatarImgURL = computed(() => {
&.clickable {
cursor: pointer;
- &:hover, &.active {
+ &:hover,
+ &.active {
background: var(--at-color-bg-grey);
border-right: 1px solid var(--at-color-border);
}
@@ -100,7 +101,7 @@ const userAvatarImgURL = computed(() => {
text-align: center;
line-height: 30px;
font-size: 13px;
- color: #FFF;
+ color: #fff;
}
}
@@ -116,14 +117,14 @@ const userAvatarImgURL = computed(() => {
font-size: 20px;
&::after {
- content: "";
+ content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 6px;
background: #0083ff;
- opacity: .4;
+ opacity: 0.4;
}
}
}
diff --git a/ui/artalk-sidebar/src/components/ItemTextEditor.vue b/ui/artalk-sidebar/src/components/ItemTextEditor.vue
index 1b3b72609..6e51368ed 100644
--- a/ui/artalk-sidebar/src/components/ItemTextEditor.vue
+++ b/ui/artalk-sidebar/src/components/ItemTextEditor.vue
@@ -6,12 +6,12 @@ const props = defineProps<{
}>()
const emit = defineEmits<{
- (evt: 'yes', value: string): boolean|void|Promise
+
@@ -113,7 +111,8 @@ async function submit(type: 'yes'|'no') {
outline: none;
background: transparent;
- &.atk-invalid {}
+ &.atk-invalid {
+ }
&:focus {
border-bottom-color: var(--at-color-main);
@@ -124,7 +123,8 @@ async function submit(type: 'yes'|'no') {
.atk-actions {
@extend .atk-list-btn-actions;
- .atk-yes-btn.atk-disabled {}
+ .atk-yes-btn.atk-disabled {
+ }
}
}
diff --git a/ui/artalk-sidebar/src/components/LoadingLayer.vue b/ui/artalk-sidebar/src/components/LoadingLayer.vue
index 70410e61f..dd88d02d5 100644
--- a/ui/artalk-sidebar/src/components/LoadingLayer.vue
+++ b/ui/artalk-sidebar/src/components/LoadingLayer.vue
@@ -5,7 +5,7 @@ const props = defineProps<{
}>()
const showSpinner = ref(false)
-let timer: number|undefined
+let timer: number | undefined
onMounted(() => {
// spinner 延迟显示，若加载等待时间太短，没必要显示（闪一下即可）
@@ -26,7 +26,9 @@ onUnmounted(() => {
:style="{ background: props.transparentBg ? 'transparent' : undefined }"
>
-
+
-
{{ t('editTitle') }}
- {{ t('switchKey') }}
+
+ {{ t('editTitle') }}
+
+
+ {{ t('switchKey') }}
+
{{ !page.admin_only ? t('commentAllowAll') : t('commentOnlyAdmin') }}
+ >
+ {{ !page.admin_only ? t('commentAllowAll') : t('commentOnlyAdmin') }}
+
diff --git a/ui/artalk-sidebar/src/components/Pagination.vue b/ui/artalk-sidebar/src/components/Pagination.vue
index 8698ec308..cdd58d6fc 100644
--- a/ui/artalk-sidebar/src/components/Pagination.vue
+++ b/ui/artalk-sidebar/src/components/Pagination.vue
@@ -20,11 +20,11 @@ const emit = defineEmits<{
const curtPage = ref(1)
const offset = computed(() => pageSize.value * (curtPage.value - 1))
const maxPage = computed(() => Math.ceil(total.value / pageSize.value))
-const prevDisabled = computed(() => (curtPage.value - 1 < 1))
-const nextDisabled = computed(() => (curtPage.value + 1 > maxPage.value))
+const prevDisabled = computed(() => curtPage.value - 1 < 1)
+const nextDisabled = computed(() => curtPage.value + 1 > maxPage.value)
const inputValue = ref(String(curtPage.value))
-let inputTimer: number|undefined
+let inputTimer: number | undefined
function changePage(page: number) {
curtPage.value = page
@@ -36,14 +36,18 @@ function changePage(page: number) {
function prev() {
if (disabled?.value) return
const page = curtPage.value - 1
- if (page < 1) { return }
+ if (page < 1) {
+ return
+ }
changePage(page)
}
function next() {
if (disabled?.value) return
const page = curtPage.value + 1
- if (page > maxPage.value) { return }
+ if (page > maxPage.value) {
+ return
+ }
changePage(page)
}
@@ -67,11 +71,22 @@ function triggerInput(now: boolean = false) {
const value = inputValue.value.trim()
const modify = () => {
- if (value === '') { revokeInput();return }
+ if (value === '') {
+ revokeInput()
+ return
+ }
let page = Number(value)
- if (Number.isNaN(page)) { revokeInput();return }
- if (page < 1) { revokeInput();return }
- if (page > maxPage.value) { page = maxPage.value }
+ if (Number.isNaN(page)) {
+ revokeInput()
+ return
+ }
+ if (page < 1) {
+ revokeInput()
+ return
+ }
+ if (page > maxPage.value) {
+ page = maxPage.value
+ }
changePage(page)
}
@@ -86,13 +101,17 @@ function onInputKeydown(evt: KeyboardEvent) {
if (keyCode === 38) {
// 上键
const page = Number(inputValue.value) + 1
- if (page > maxPage.value) { return }
- fillInput(page);
+ if (page > maxPage.value) {
+ return
+ }
+ fillInput(page)
triggerInput(false)
} else if (keyCode === 40) {
// 下键
const page = Number(inputValue.value) - 1
- if (page < 1) { return }
+ if (page < 1) {
+ return
+ }
fillInput(page)
triggerInput(false)
} else if (keyCode === 13) {
@@ -113,7 +132,19 @@ defineExpose({ prev, next, reset })
@click="prev()"
aria-label="Previous page"
>
-
+
-
+
-
+
+
@@ -71,7 +79,7 @@ const hiddenNodes = ['admin_users']
position: absolute;
top: 50%;
transform: translateY(-50%);
- transition: height ease .2s;
+ transition: height ease 0.2s;
left: -10px;
content: '';
height: 10px;
@@ -102,7 +110,8 @@ const hiddenNodes = ['admin_users']
}
}
-.pf-grp.level-1, .pf-grp.level-2 {
+.pf-grp.level-1,
+.pf-grp.level-2 {
& > .pf-head > .sub-title {
padding: 0 10px 0 10px;
margin-left: 4px;
@@ -111,7 +120,6 @@ const hiddenNodes = ['admin_users']
}
}
-
.pf-grp.level-3 {
margin-left: 10px;
diff --git a/ui/artalk-sidebar/src/components/PreferenceItem.vue b/ui/artalk-sidebar/src/components/PreferenceItem.vue
index b3a1dac4e..2e70d8436 100644
--- a/ui/artalk-sidebar/src/components/PreferenceItem.vue
+++ b/ui/artalk-sidebar/src/components/PreferenceItem.vue
@@ -23,40 +23,34 @@ function onChange() {
+
-
diff --git a/ui/artalk-sidebar/src/components/SiteCreate.vue b/ui/artalk-sidebar/src/components/SiteCreate.vue
index 9f7d21545..0f191cad6 100644
--- a/ui/artalk-sidebar/src/components/SiteCreate.vue
+++ b/ui/artalk-sidebar/src/components/SiteCreate.vue
@@ -5,7 +5,7 @@ import type { ArtalkType } from 'artalk'
const { t } = useI18n()
const props = defineProps<{
- initVal?: { name: string, urls: string }
+ initVal?: { name: string; urls: string }
}>()
const emit = defineEmits<{
@@ -14,9 +14,9 @@ const emit = defineEmits<{
}>()
const isLoading = ref(false)
-const site = ref<{name: string, urls: string}>({
+const site = ref<{ name: string; urls: string }>({
name: '',
- urls: ''
+ urls: '',
})
onMounted(() => {
@@ -26,22 +26,33 @@ onMounted(() => {
async function submit() {
const siteName = site.value.name.trim()
- const siteUrls = site.value.urls.trim().split(',').map((v) => v.trim()).filter((v) => !!v)
+ const siteUrls = site.value.urls
+ .trim()
+ .split(',')
+ .map((v) => v.trim())
+ .filter((v) => !!v)
- if (siteName === '') { alert('请输入站点名称'); return }
+ if (siteName === '') {
+ alert('请输入站点名称')
+ return
+ }
isLoading.value = true
let s: ArtalkType.SiteData
try {
- s = (await artalk!.ctx.getApi().sites.createSite({
- name: siteName,
- urls: siteUrls
- })).data
+ s = (
+ await artalk!.ctx.getApi().sites.createSite({
+ name: siteName,
+ urls: siteUrls,
+ })
+ ).data
} catch (err: any) {
window.alert(`创建失败：${err.message || ''}`)
console.error(err)
return
- } finally { isLoading.value = false }
+ } finally {
+ isLoading.value = false
+ }
emit('done', s)
}
@@ -60,14 +71,26 @@ function close() {
{{ node.title }}
{{ node.subTitle }}
{{ node.title }}
- {{ node.subTitle }}
- {{ node.subTitle }}
+
-
-
-
+
+
+
+
+
+
+
+
- {{ site.name }}
+
+ {{ site.name }}
+
-
{{ url }}
+
+ {{ url }}
+
@@ -105,7 +112,9 @@ function onFiledEditorNo() {
-
-
+
diff --git a/ui/artalk-sidebar/src/components/SiteSwitcher.vue b/ui/artalk-sidebar/src/components/SiteSwitcher.vue
index 004bd7d7f..941ba2c92 100644
--- a/ui/artalk-sidebar/src/components/SiteSwitcher.vue
+++ b/ui/artalk-sidebar/src/components/SiteSwitcher.vue
@@ -1,10 +1,10 @@
diff --git a/ui/artalk-sidebar/src/pages/index.vue b/ui/artalk-sidebar/src/pages/index.vue
index 272956847..d771a72c5 100644
--- a/ui/artalk-sidebar/src/pages/index.vue
+++ b/ui/artalk-sidebar/src/pages/index.vue
@@ -18,11 +18,11 @@ onMounted(() => {
if (splitted[1]) bootParams.viewParams = JSON.parse(splitted[1])
}
- const LinkMap: {[key:string]:string} = {
+ const LinkMap: { [key: string]: string } = {
comments: '/comments',
pages: '/pages',
sites: '/sites',
- settings: '/settings'
+ settings: '/settings',
}
router.replace(LinkMap[bootParams.view] || '/comments')
})
diff --git a/ui/artalk-sidebar/src/pages/login.vue b/ui/artalk-sidebar/src/pages/login.vue
index ae0fd2412..c1752ebfc 100644
--- a/ui/artalk-sidebar/src/pages/login.vue
+++ b/ui/artalk-sidebar/src/pages/login.vue
@@ -15,19 +15,22 @@ const router = useRouter()
const { t } = useI18n()
let userForm = ref({
- email: '',
- password: ''
+ email: '',
+ password: '',
})
let version = ref('')
let buildHash = ref('')
let loginErr = ref('')
-let userSelector = ref{{ t('rename') }}
+
+ {{ t('rename') }}
+
{{ t('edit') }} URL
@@ -126,6 +135,4 @@ function onFiledEditorNo() {
- Powered by Artalk (v{{version}} / {{buildHash}})
+ Powered by
+ Artalk
+ (v{{ version }} / {{ buildHash }})
{{ t('loginSelectHint') }}
-
{{u}}
+
+ {{ u }}
+
-
+
-
{{ page.title }}
+
+ {{ page.title }}
+
{{ page.url }}
@@ -202,7 +219,7 @@ function openPage(url: string) {
background: var(--at-color-bg);
z-index: 10;
border-bottom: 1px solid transparent;
- transition: .3s ease-out padding;
+ transition: 0.3s ease-out padding;
&.bordered {
padding-bottom: 10px;
diff --git a/ui/artalk-sidebar/src/pages/settings.vue b/ui/artalk-sidebar/src/pages/settings.vue
index a519ab055..02ad7c50c 100644
--- a/ui/artalk-sidebar/src/pages/settings.vue
+++ b/ui/artalk-sidebar/src/pages/settings.vue
@@ -16,8 +16,8 @@ const tree = shallowRef()
onMounted(() => {
nav.updateTabs({
- 'sites': 'site',
- 'transfer': 'transfer',
+ sites: 'site',
+ transfer: 'transfer',
})
watch(curtTab, (tab) => {
@@ -41,7 +41,7 @@ function save() {
try {
yamlStr = settings.get().getCustoms().value?.toString() || ''
} catch (err) {
- alert('YAML export error: '+err)
+ alert('YAML export error: ' + err)
console.error(err)
return
}
@@ -54,16 +54,21 @@ function save() {
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
- })
+ artalk!.ctx
+ .getApi()
+ .settings.applySettings({
+ yaml: yamlStr,
+ })
+ .then(() => {
+ alert(t('settingSaved'))
+ })
+ .catch((err) => {
+ console.error(err)
+ alert(t('settingSaveFailed') + ': ' + err)
+ })
+ .finally(() => {
+ isLoading.value = false
+ })
}
@@ -71,7 +76,10 @@ function save() {
@@ -127,7 +135,7 @@ function save() {
border: 0;
&:active {
- opacity: .9;
+ opacity: 0.9;
}
i {
@@ -144,7 +152,8 @@ function save() {
padding: 10px 30px;
}
- :deep(input[type="text"]), :deep(select) {
+ :deep(input[type='text']),
+ :deep(select) {
font-size: 17px;
width: 100%;
height: 35px;
diff --git a/ui/artalk-sidebar/src/pages/sites.vue b/ui/artalk-sidebar/src/pages/sites.vue
index ccced9d4d..379bdb7ca 100644
--- a/ui/artalk-sidebar/src/pages/sites.vue
+++ b/ui/artalk-sidebar/src/pages/sites.vue
@@ -5,22 +5,24 @@ import type { ArtalkType } from 'artalk'
const nav = useNavStore()
const sites = ref([])
-const curtEditSite = ref(null)
+const curtEditSite = ref(null)
const showSiteCreate = ref(false)
const siteCreateInitVal = ref()
const { t } = useI18n()
onMounted(() => {
- nav.updateTabs({
-
- }, 'sites')
+ nav.updateTabs({}, 'sites')
nav.setPageLoading(true)
- artalk?.ctx.getApi().sites.getSites().then(res => {
- sites.value = res.data.sites
- }).finally(() => {
- nav.setPageLoading(false)
- })
+ artalk?.ctx
+ .getApi()
+ .sites.getSites()
+ .then((res) => {
+ sites.value = res.data.sites
+ })
+ .finally(() => {
+ nav.setPageLoading(false)
+ })
// 通过启动参数打开站点创建
const vp = bootParams.viewParams
@@ -46,7 +48,8 @@ const sitesGrouped = computed(() => {
let j = -1
for (let i = 0; i < sites.value.length; i++) {
const item = sites.value[i]
- if (i % 4 === 0) { // 每 4 个一组
+ if (i % 4 === 0) {
+ // 每 4 个一组
grp.push([])
j++
}
@@ -67,10 +70,10 @@ function onNewSiteCreated(siteNew: ArtalkType.SiteData) {
}
function onSiteItemUpdate(site: ArtalkType.SiteData) {
- const index = sites.value.findIndex(s => s.id === site.id)
+ const index = sites.value.findIndex((s) => s.id === site.id)
if (index != -1) {
const orgSite = sites.value[index]
- Object.keys(site).forEach(key => {
+ Object.keys(site).forEach((key) => {
;(orgSite as any)[key] = (site as any)[key]
})
}
@@ -78,7 +81,7 @@ function onSiteItemUpdate(site: ArtalkType.SiteData) {
}
function onSiteItemRemove(id: number) {
- const index = sites.value.findIndex(p => p.id === id)
+ const index = sites.value.findIndex((p) => p.id === id)
sites.value.splice(index, 1)
nav.refreshSites()
}
@@ -89,7 +92,9 @@ function onSiteItemRemove(id: number) {
>({})
const exportTaskStarted = ref(false)
onMounted(() => {
- nav.updateTabs({
- 'import': 'import',
- 'export': 'export',
- }, 'import')
+ nav.updateTabs(
+ {
+ import: 'import',
+ export: 'export',
+ },
+ 'import',
+ )
watch(curtTab, (tab) => {
if (tab === 'export') {
startExportTask()
@@ -113,7 +116,7 @@ async function startExportTask() {
function downloadFile(filename: string, text: string) {
const el = document.createElement('a')
- el.setAttribute('href', `data:text/json;charset=utf-8,${encodeURIComponent(text)}`);
+ el.setAttribute('href', `data:text/json;charset=utf-8,${encodeURIComponent(text)}`)
el.setAttribute('download', filename)
el.style.display = 'none'
document.body.appendChild(el)
@@ -142,12 +145,22 @@ function padWithZeros(vNumber: number, width: number) {
return numAsString
}
-const artransferToolHint = computed(() => t('artransferToolHint', { link: '__LINK__' }).replace('__LINK__', `${t('artransfer')}`))
+const artransferToolHint = computed(() =>
+ t('artransferToolHint', { link: '__LINK__' }).replace(
+ '__LINK__',
+ `${t('artransfer')}`,
+ ),
+)
@@ -177,12 +190,14 @@ const artransferToolHint = computed(() => t('artransferToolHint', { link: '__LIN
-
+
diff --git a/ui/artalk-sidebar/src/pages/users.vue b/ui/artalk-sidebar/src/pages/users.vue
index 124c6a260..754acf7e9 100644
--- a/ui/artalk-sidebar/src/pages/users.vue
+++ b/ui/artalk-sidebar/src/pages/users.vue
@@ -17,14 +17,17 @@ const pagination = ref>()
const curtType = ref('all')
const addingUser = ref(false)
-const editingUser = ref()
+const editingUser = ref()
onMounted(() => {
- nav.updateTabs({
- 'all': 'all',
- 'admin': 'admin',
- 'create': 'create'
- }, 'all')
+ nav.updateTabs(
+ {
+ all: 'all',
+ admin: 'admin',
+ create: 'create',
+ },
+ 'all',
+ )
watch(curtTab, (tab) => {
if (tab === 'create') {
@@ -51,15 +54,18 @@ onMounted(() => {
function reqUsers(offset: number) {
nav.setPageLoading(true)
- artalk?.ctx.getApi().users.getUsers(curtType.value as any, {
- offset,
- limit: pageSize.value
- })
- .then(res => {
+ artalk?.ctx
+ .getApi()
+ .users.getUsers(curtType.value as any, {
+ offset,
+ limit: pageSize.value,
+ })
+ .then((res) => {
pageTotal.value = res.data.count
users.value = res.data.users
nav.scrollPageToTop()
- }).finally(() => {
+ })
+ .finally(() => {
nav.setPageLoading(false)
})
}
@@ -79,11 +85,11 @@ function editUser(user: ArtalkType.UserDataForAdmin) {
}
function updateUser(user: ArtalkType.UserDataForAdmin) {
- const index = users.value.findIndex(u => u.id === user.id)
+ const index = users.value.findIndex((u) => u.id === user.id)
if (index != -1) {
// 修改用户
const orgUser = users.value[index]
- Object.keys(users).forEach(key => {
+ Object.keys(users).forEach((key) => {
;(orgUser as any)[key] = (users as any)[key]
})
} else {
@@ -101,10 +107,16 @@ function closeEditUser() {
}
function delUser(user: ArtalkType.UserDataForAdmin) {
- if (window.confirm(`该操作将删除 用户："${user.name}" 邮箱："${user.email}" 所有评论，包括其评论下面他人的回复评论，是否继续？`)) {
- artalk!.ctx.getApi().users.deleteUser(user.id)
+ if (
+ window.confirm(
+ `该操作将删除 用户："${user.name}" 邮箱："${user.email}" 所有评论，包括其评论下面他人的回复评论，是否继续？`,
+ )
+ ) {
+ artalk!.ctx
+ .getApi()
+ .users.deleteUser(user.id)
.then(() => {
- const index = users.value.findIndex(u => u.id === user.id)
+ const index = users.value.findIndex((u) => u.id === user.id)
users.value.splice(index, 1)
if (user.is_in_conf) {
@@ -112,7 +124,7 @@ function delUser(user: ArtalkType.UserDataForAdmin) {
}
})
.catch((e: ArtalkType.FetchError) => {
- alert('删除失败：'+e.message)
+ alert('删除失败：' + e.message)
})
}
}
@@ -121,21 +133,31 @@ function delUser(user: ArtalkType.UserDataForAdmin) {
('.atk-loading-icon')!
this.$text = this.$el.querySelector('.atk-text')!
- this.$el.onclick = () => { this.click() }
+ this.$el.onclick = () => {
+ this.click()
+ }
}
click() {
@@ -60,7 +63,7 @@ export default class ReadMoreBtn {
}
/** 加载 */
- setLoading (isLoading: boolean) {
+ setLoading(isLoading: boolean) {
this.$loading.style.display = isLoading ? '' : 'none'
this.$text.style.display = isLoading ? 'none' : ''
}
diff --git a/ui/artalk/src/config.ts b/ui/artalk/src/config.ts
index 72bd9f812..1f7c0c842 100644
--- a/ui/artalk/src/config.ts
+++ b/ui/artalk/src/config.ts
@@ -12,7 +12,10 @@ import Defaults from './defaults'
* @returns The config for Artalk instance creation
*/
export function handelCustomConf(customConf: Partial, full: true): ArtalkConfig
-export function handelCustomConf(customConf: Partial, full?: false): Partial
+export function handelCustomConf(
+ customConf: Partial,
+ full?: false,
+): Partial
export function handelCustomConf(customConf: Partial, full = false) {
// 合并默认配置
const conf: Partial = full ? mergeDeep(Defaults, customConf) : customConf
@@ -30,28 +33,22 @@ export function handelCustomConf(customConf: Partial, full = false
}
// 默认 pageKey
- if (conf.pageKey === '')
- conf.pageKey = `${window.location.pathname}` // @link http://bl.ocks.org/abernier/3070589
+ if (conf.pageKey === '') conf.pageKey = `${window.location.pathname}` // @link http://bl.ocks.org/abernier/3070589
// 默认 pageTitle
- if (conf.pageTitle === '')
- conf.pageTitle = `${document.title}`
+ if (conf.pageTitle === '') conf.pageTitle = `${document.title}`
// 服务器配置
- if (conf.server)
- conf.server = conf.server.replace(/\/$/, '').replace(/\/api\/?$/, '')
+ if (conf.server) conf.server = conf.server.replace(/\/$/, '').replace(/\/api\/?$/, '')
// 自适应语言
- if (conf.locale === 'auto')
- conf.locale = navigator.language
+ if (conf.locale === 'auto') conf.locale = navigator.language
// 自动判断启用平铺模式
- if (conf.flatMode === 'auto')
- conf.flatMode = window.matchMedia("(max-width: 768px)").matches
+ if (conf.flatMode === 'auto') conf.flatMode = window.matchMedia('(max-width: 768px)').matches
// flatMode
- if (typeof conf.nestMax === 'number' && Number(conf.nestMax) <= 1)
- conf.flatMode = true
+ if (typeof conf.nestMax === 'number' && Number(conf.nestMax) <= 1) conf.flatMode = true
return conf
}
@@ -64,18 +61,23 @@ export function handelCustomConf(customConf: Partial, full = false
*/
export function handleConfFormServer(conf: Partial) {
const DisabledKeys: (keyof ArtalkConfig)[] = [
- 'el', 'pageKey', 'pageTitle', 'server', 'site', 'darkMode'
+ 'el',
+ 'pageKey',
+ 'pageTitle',
+ 'server',
+ 'site',
+ 'darkMode',
]
- Object.keys(conf).forEach(k => {
+ Object.keys(conf).forEach((k) => {
if (DisabledKeys.includes(k as any)) delete conf[k]
})
// Patch: `emoticons` config string to json
- if (conf.emoticons && typeof conf.emoticons === "string") {
+ if (conf.emoticons && typeof conf.emoticons === 'string') {
conf.emoticons = conf.emoticons.trim()
- if (conf.emoticons.startsWith("[") || conf.emoticons.startsWith("{")) {
+ if (conf.emoticons.startsWith('[') || conf.emoticons.startsWith('{')) {
conf.emoticons = JSON.parse(conf.emoticons) // parse json
- } else if (conf.emoticons === "false") {
+ } else if (conf.emoticons === 'false') {
conf.emoticons = false
}
}
@@ -98,10 +100,12 @@ export function convertApiOptions(conf: Partial, ctx?: ContextApi)
pageTitle: conf.pageTitle || '',
timeout: conf.reqTimeout,
getApiToken: () => ctx?.get('user').getData().token,
- userInfo: ctx?.get('user').checkHasBasicUserInfo() ? {
- name: ctx?.get('user').getData().nick,
- email: ctx?.get('user').getData().email,
- } : undefined,
+ userInfo: ctx?.get('user').checkHasBasicUserInfo()
+ ? {
+ name: ctx?.get('user').getData().nick,
+ email: ctx?.get('user').getData().email,
+ }
+ : undefined,
handlers: ctx?.getApiHandlers(),
}
}
diff --git a/ui/artalk/src/context.ts b/ui/artalk/src/context.ts
index 6fa76f05a..02bdbd781 100644
--- a/ui/artalk/src/context.ts
+++ b/ui/artalk/src/context.ts
@@ -1,4 +1,11 @@
-import type { ArtalkConfig, CommentData, ListFetchParams, ContextApi, EventPayloadMap, SidebarShowPayload } from '@/types'
+import type {
+ ArtalkConfig,
+ CommentData,
+ ListFetchParams,
+ ContextApi,
+ EventPayloadMap,
+ SidebarShowPayload,
+} from '@/types'
import type { TInjectedServices } from './service'
import { Api, ApiHandlers } from './api'
@@ -14,7 +21,7 @@ import { convertApiOptions, createNewApiHandlers, handelCustomConf } from './con
import { watchConf } from './lib/watch-conf'
// Auto dependency injection
-interface Context extends TInjectedServices { }
+interface Context extends TInjectedServices {}
/**
* Artalk Context
@@ -55,7 +62,7 @@ class Context implements ContextApi {
return new Api(convertApiOptions(this.conf, this))
}
- private apiHandlers = null
+ private apiHandlers = null
getApiHandlers() {
if (!this.apiHandlers) this.apiHandlers = createNewApiHandlers(this)
return this.apiHandlers
@@ -146,11 +153,11 @@ class Context implements ContextApi {
}
/* i18n */
- $t(key: I18n.I18nKeys, args: {[key: string]: string} = {}): string {
+ $t(key: I18n.I18nKeys, args: { [key: string]: string } = {}): string {
return I18n.t(key, args)
}
- setDarkMode(darkMode: boolean|'auto'): void {
+ setDarkMode(darkMode: boolean | 'auto'): void {
this.updateConf({ darkMode })
}
@@ -171,7 +178,10 @@ class Context implements ContextApi {
return marked.getInstance()
}
- watchConf(keys: T, effect: (conf: Pick) => void): void {
+ watchConf(
+ keys: T,
+ effect: (conf: Pick) => void,
+ ): void {
watchConf(this, keys, effect)
}
}
diff --git a/ui/artalk/src/data.ts b/ui/artalk/src/data.ts
index 066a3e08e..4b378648f 100644
--- a/ui/artalk/src/data.ts
+++ b/ui/artalk/src/data.ts
@@ -1,4 +1,12 @@
-import type { NotifyData, PageData, CommentData, DataManagerApi, ListFetchParams, ListLastFetchData, EventPayloadMap } from '@/types'
+import type {
+ NotifyData,
+ PageData,
+ CommentData,
+ DataManagerApi,
+ ListFetchParams,
+ ListLastFetchData,
+ EventPayloadMap,
+} from '@/types'
import EventManager from './lib/event-manager'
export class DataManager implements DataManagerApi {
@@ -8,9 +16,7 @@ export class DataManager implements DataManagerApi {
private notifies: NotifyData[] = []
private page?: PageData
- constructor(
- protected events: EventManager
- ) {}
+ constructor(protected events: EventManager) {}
getLoading() {
return this.loading
@@ -40,7 +46,7 @@ export class DataManager implements DataManagerApi {
}
findComment(id: number) {
- return this.comments.find(c => c.id === id)
+ return this.comments.find((c) => c.id === id)
}
clearComments() {
@@ -64,7 +70,7 @@ export class DataManager implements DataManagerApi {
}
updateComment(comment: CommentData) {
- this.comments = this.comments.map(c => {
+ this.comments = this.comments.map((c) => {
if (c.id === comment.id) return comment
return c
})
@@ -74,9 +80,9 @@ export class DataManager implements DataManagerApi {
}
deleteComment(id: number) {
- const comment = this.comments.find(c => c.id === id)
+ const comment = this.comments.find((c) => c.id === id)
if (!comment) throw new Error(`Comment ${id} not found`)
- this.comments = this.comments.filter(c => c.id !== id)
+ this.comments = this.comments.filter((c) => c.id !== id)
this.events.trigger('comment-deleted', comment)
this.events.trigger('list-loaded', this.comments)
diff --git a/ui/artalk/src/defaults.ts b/ui/artalk/src/defaults.ts
index 7bc422b0c..9f15170ed 100644
--- a/ui/artalk/src/defaults.ts
+++ b/ui/artalk/src/defaults.ts
@@ -17,7 +17,7 @@ const defaults: ArtalkConfig = {
nestMax: 2,
nestSort: 'DATE_ASC',
- emoticons: "https://cdn.jsdelivr.net/gh/ArtalkJS/Emoticons/grps/default.json",
+ emoticons: 'https://cdn.jsdelivr.net/gh/ArtalkJS/Emoticons/grps/default.json',
vote: true,
voteDown: false,
diff --git a/ui/artalk/src/editor/editor.html b/ui/artalk/src/editor/editor.html
index 308150b63..9f7674182 100644
--- a/ui/artalk/src/editor/editor.html
+++ b/ui/artalk/src/editor/editor.html
@@ -1,13 +1,13 @@
-
+
{{ t('siteCount', { count: sites.length }) }}
-
+
+
+
Artrans {{ t('dataFile') }}
{{ t('payload') }} ({{ t('optional') }})
- {{ t('moreDetails') }}
+
+ {{ t('moreDetails') }}
+
-
+
-
`,
+ )
this.$input = this.$el.querySelector('.atk-input')!
this.$input.value = `${this.page}`
@@ -78,11 +79,23 @@ export default class Pagination {
const value = this.$input.value.trim()
const modify = () => {
- if (value === '') { this.setInput(this.page);return }
+ if (value === '') {
+ this.setInput(this.page)
+ return
+ }
let page = Number(value)
- if (Number.isNaN(page)) { this.setInput(this.page);return }
- if (page < 1) { this.setInput(this.page);return }
- if (page > this.maxPage) { this.setInput(this.maxPage);page = this.maxPage }
+ if (Number.isNaN(page)) {
+ this.setInput(this.page)
+ return
+ }
+ if (page < 1) {
+ this.setInput(this.page)
+ return
+ }
+ if (page > this.maxPage) {
+ this.setInput(this.maxPage)
+ page = this.maxPage
+ }
this.change(page)
}
@@ -93,13 +106,17 @@ export default class Pagination {
public prev() {
const page = this.page - 1
- if (page < 1) { return }
+ if (page < 1) {
+ return
+ }
this.change(page)
}
public next() {
const page = this.page + 1
- if (page > this.maxPage) { return }
+ if (page > this.maxPage) {
+ return
+ }
this.change(page)
}
@@ -134,13 +151,17 @@ export default class Pagination {
if (keyCode === 38) {
// 上键
const page = Number(this.$input.value) + 1
- if (page > this.maxPage) { return }
- this.setInput(page);
+ if (page > this.maxPage) {
+ return
+ }
+ this.setInput(page)
this.input()
} else if (keyCode === 40) {
// 下键
const page = Number(this.$input.value) - 1
- if (page < 1) { return }
+ if (page < 1) {
+ return
+ }
this.setInput(page)
this.input()
} else if (keyCode === 13) {
@@ -150,7 +171,7 @@ export default class Pagination {
}
/** 加载 */
- setLoading (isLoading: boolean) {
+ setLoading(isLoading: boolean) {
if (isLoading) Ui.showLoading(this.$el)
else Ui.hideLoading(this.$el)
}
diff --git a/ui/artalk/src/components/read-more-btn.ts b/ui/artalk/src/components/read-more-btn.ts
index 0a29d6359..5324da4a7 100644
--- a/ui/artalk/src/components/read-more-btn.ts
+++ b/ui/artalk/src/components/read-more-btn.ts
@@ -23,7 +23,7 @@ export default class ReadMoreBtn {
/** 是否有更多内容 */
get hasMore() {
- return this.total > (this.offset + this.opts.pageSize)
+ return this.total > this.offset + this.opts.pageSize
}
public constructor(opts: ReadMoreBtnOptions) {
@@ -31,17 +31,20 @@ export default class ReadMoreBtn {
this.origText = this.opts.text || this.origText
this.$el = Utils.createElement(
- ``,
+ )
this.$loading = this.$el.querySelector
+
@@ -191,7 +213,7 @@ function delUser(user: ArtalkType.UserDataForAdmin) {
color: #fff;
&.admin {
- background: #0083FF;
+ background: #0083ff;
}
&.in-conf {
diff --git a/ui/artalk-sidebar/src/stores/nav.ts b/ui/artalk-sidebar/src/stores/nav.ts
index ec2861407..5da2329bf 100644
--- a/ui/artalk-sidebar/src/stores/nav.ts
+++ b/ui/artalk-sidebar/src/stores/nav.ts
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
import { artalk } from '../global'
import type { ArtalkType } from 'artalk'
-type TabsObj = {[name: string]: string}
+type TabsObj = { [name: string]: string }
export const useNavStore = defineStore('nav', () => {
const curtTab = ref('')
@@ -13,11 +13,11 @@ export const useNavStore = defineStore('nav', () => {
const siteSwitcherShow = ref(false)
const isSearchEnabled = ref(false)
- const searchEvent = ref<((val: string) => void)|null>(null)
- const searchResetEvent = ref<(() => void)|null>(null)
+ const searchEvent = ref<((val: string) => void) | null>(null)
+ const searchResetEvent = ref<(() => void) | null>(null)
const isPageLoading = ref(false)
- const scrollableArea = ref(null)
+ const scrollableArea = ref(null)
const updateTabs = (aTabs: TabsObj, activeTab?: string) => {
tabs.value = aTabs
@@ -53,23 +53,40 @@ export const useNavStore = defineStore('nav', () => {
}
const refreshSites = () => {
- artalk?.ctx.getApi().sites.getSites().then((res) => {
- sites.value = res.data.sites
- })
+ artalk?.ctx
+ .getApi()
+ .sites.getSites()
+ .then((res) => {
+ sites.value = res.data.sites
+ })
}
- const enableSearch = (searchEvt: ((val: string) => void), searchResetEvt: () => void) => {
+ const enableSearch = (searchEvt: (val: string) => void, searchResetEvt: () => void) => {
isSearchEnabled.value = true
searchEvent.value = searchEvt
searchResetEvent.value = searchResetEvt
}
return {
- sites, curtPage, curtTab, tabs, siteSwitcherShow, scrollableArea, isPageLoading,
- updateTabs, setTabActive,
- showSiteSwitcher, hideSiteSwitcher, toggleSiteSwitcher,
- scrollPageToTop, scrollPageToEl, setPageLoading,
+ sites,
+ curtPage,
+ curtTab,
+ tabs,
+ siteSwitcherShow,
+ scrollableArea,
+ isPageLoading,
+ updateTabs,
+ setTabActive,
+ showSiteSwitcher,
+ hideSiteSwitcher,
+ toggleSiteSwitcher,
+ scrollPageToTop,
+ scrollPageToEl,
+ setPageLoading,
refreshSites,
- isSearchEnabled, searchEvent, searchResetEvent, enableSearch,
+ isSearchEnabled,
+ searchEvent,
+ searchResetEvent,
+ enableSearch,
}
})
diff --git a/ui/artalk-sidebar/src/stores/user.ts b/ui/artalk-sidebar/src/stores/user.ts
index b4c709b74..be228a05a 100644
--- a/ui/artalk-sidebar/src/stores/user.ts
+++ b/ui/artalk-sidebar/src/stores/user.ts
@@ -29,7 +29,6 @@ export const useUserStore = defineStore('user', {
this.email = userData.email
this.isAdmin = userData.isAdmin
this.token = userData.token
- }
- }
+ },
+ },
})
-
diff --git a/ui/artalk-sidebar/src/style.scss b/ui/artalk-sidebar/src/style.scss
index c981e5bac..56f4358cd 100644
--- a/ui/artalk-sidebar/src/style.scss
+++ b/ui/artalk-sidebar/src/style.scss
@@ -6,7 +6,8 @@ body {
margin: 0;
}
-.artalk, .atk-layer-wrap {
+.artalk,
+.atk-layer-wrap {
font-family: $font-family;
}
@@ -66,7 +67,8 @@ body {
}
}
- input, textarea {
+ input,
+ textarea {
display: block;
line-height: $form-height;
padding: 0 10px;
@@ -82,7 +84,7 @@ body {
border-bottom-color: var(--at-color-bg-light);
}
- &[type="file"] {
+ &[type='file'] {
background: transparent;
border: 2px solid var(--at-color-border);
cursor: pointer;
@@ -98,7 +100,7 @@ body {
}
}
- &[type="file"]::-webkit-file-upload-button {
+ &[type='file']::-webkit-file-upload-button {
background: transparent;
color: var(--at-color-font);
border: 0;
@@ -110,7 +112,7 @@ body {
line-height: 25px;
margin-right: 15px;
cursor: pointer;
- transition: .2s ease;
+ transition: 0.2s ease;
-webkit-appearance: none;
border-radius: 0;
}
@@ -156,7 +158,9 @@ body {
user-select: none;
}
- input, select, button {
+ input,
+ select,
+ button {
font-size: 15px;
}
@@ -190,7 +194,7 @@ body {
font-size: 14px;
.atk-curt {
- color: var(--at-color-main)
+ color: var(--at-color-main);
}
.atk-abort {
@@ -218,7 +222,8 @@ body {
}
}
- .atk-log {}
+ .atk-log {
+ }
.atk-iframe {
width: 100%;
diff --git a/ui/artalk-sidebar/src/style/_extends.scss b/ui/artalk-sidebar/src/style/_extends.scss
index dacd86597..22a376033 100644
--- a/ui/artalk-sidebar/src/style/_extends.scss
+++ b/ui/artalk-sidebar/src/style/_extends.scss
@@ -7,15 +7,15 @@
&::-webkit-scrollbar-thumb,
&::-webkit-scrollbar-thumb:window-inactive {
- background: rgba(86,86,86,.3);
+ background: rgba(86, 86, 86, 0.3);
}
&::-webkit-scrollbar-thumb:vertical:hover {
- background: rgba(65,74,82,.77);
+ background: rgba(65, 74, 82, 0.77);
}
&::-webkit-scrollbar-thumb:vertical:active {
- background: rgba(41,47,53,.77);
+ background: rgba(41, 47, 53, 0.77);
}
}
diff --git a/ui/artalk-sidebar/src/style/_variables.scss b/ui/artalk-sidebar/src/style/_variables.scss
index 29d1f40df..b6d7e62a4 100644
--- a/ui/artalk-sidebar/src/style/_variables.scss
+++ b/ui/artalk-sidebar/src/style/_variables.scss
@@ -1,4 +1,5 @@
-$font-family: "Helvetica Neue", "PingFangSC-Light", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
+$font-family: 'Helvetica Neue', 'PingFangSC-Light', 'Hiragino Sans GB', 'Microsoft YaHei',
+ 'WenQuanYi Micro Hei', sans-serif;
$font-size: 14px;
$line-height: 1.6em;
$block-radius: 6px;
diff --git a/ui/artalk-sidebar/vite.config.ts b/ui/artalk-sidebar/vite.config.ts
index 2ddf70fba..f93f24147 100644
--- a/ui/artalk-sidebar/vite.config.ts
+++ b/ui/artalk-sidebar/vite.config.ts
@@ -13,8 +13,8 @@ export default defineConfig({
base: './',
build: {
target: 'es2015',
- outDir: resolve(__dirname, "dist"),
- minify: 'terser'
+ outDir: resolve(__dirname, 'dist'),
+ minify: 'terser',
},
plugins: [
VueRouter({ importMode: 'sync' }),
@@ -25,32 +25,32 @@ export default defineConfig({
}),
(() => ({
name: 'prod-vue-resolver',
- resolveId (id) {
+ resolveId(id) {
// @issue https://github.com/vitejs/vite/issues/6607
// dev mode vite resolves vue in other way
// only in prod mode, `id === vue` is true
- if(id === 'vue') {
+ if (id === 'vue') {
return resolve(__dirname, './node_modules/vue/dist/vue.runtime.esm-bundler.js')
}
- }
+ },
}))(),
],
resolve: {
alias: {
- '@': fileURLToPath(new URL('./src', import.meta.url))
- }
+ '@': fileURLToPath(new URL('./src', import.meta.url)),
+ },
},
server: {
port: 23367,
proxy: {
'/api': 'http://127.0.0.1:23366',
- }
+ },
},
css: {
preprocessorOptions: {
scss: {
- additionalData: `@import "./src/style/_variables.scss";@import "./src/style/_extends.scss";`
- },
+ additionalData: `@import "./src/style/_variables.scss";@import "./src/style/_extends.scss";`,
+ },
},
},
})
diff --git a/ui/artalk/.eslintrc.cjs b/ui/artalk/.eslintrc.cjs
index 824c52ca6..e9d6395df 100644
--- a/ui/artalk/.eslintrc.cjs
+++ b/ui/artalk/.eslintrc.cjs
@@ -2,7 +2,5 @@ const path = require('node:path')
module.exports = {
root: true,
- extends: [
- path.join(__dirname, '../../.eslintrc.cjs'),
- ]
+ extends: [path.join(__dirname, '../../.eslintrc.cjs')],
}
diff --git a/ui/artalk/index.html b/ui/artalk/index.html
index c03d3134c..a1d1b9853 100644
--- a/ui/artalk/index.html
+++ b/ui/artalk/index.html
@@ -1,156 +1,279 @@
-
+
-
-
- Artalk DEMO
-
-
-
+
+
+ Artalk DEMO
+
+
+
-
-
-
-
-
-
`)
+
{{ user.name }}
- {{user.badge_name}}
- {{ t('Admin') }}
- {{ t('Config') }}
+
+ {{ user.badge_name }}
+
+
+ {{ t('Admin') }}
+
+
+ {{ t('Config') }}
+
{{ user.email }}
{{ t('edit') }}
- {{ t('comment') }} ({{user.comment_count}})
+ {{ t('comment') }} ({{ user.comment_count }})
{{ t('delete') }}
-
- {
}
export interface ApiHandlers {
- add: (action: T, handler: (data: ApiHandlerPayload[T]) => Promise) => void
+ add: (
+ action: T,
+ handler: (data: ApiHandlerPayload[T]) => Promise,
+ ) => void
get: () => ApiHandler[]
}
export function createApiHandlers(): ApiHandlers {
const handlers: ApiHandler[] = []
return {
- add: (action, handler) => { handlers.push({ action, handler }) },
- get: () => handlers
+ add: (action, handler) => {
+ handlers.push({ action, handler })
+ },
+ get: () => handlers,
}
}
diff --git a/ui/artalk/src/api/index.ts b/ui/artalk/src/api/index.ts
index db7fb8bbf..64467df5b 100644
--- a/ui/artalk/src/api/index.ts
+++ b/ui/artalk/src/api/index.ts
@@ -11,7 +11,7 @@ export class Api extends ApiV2 {
constructor(opts: ApiOptions) {
super({
baseUrl: opts.baseURL,
- customFetch: (input, init) => Fetch(opts, input, init)
+ customFetch: (input, init) => Fetch(opts, input, init),
})
this._opts = opts
diff --git a/ui/artalk/src/artalk.ts b/ui/artalk/src/artalk.ts
index 892f00682..15a0b91bf 100644
--- a/ui/artalk/src/artalk.ts
+++ b/ui/artalk/src/artalk.ts
@@ -111,7 +111,7 @@ export default class Artalk {
siteName: conf.site,
countEl: conf.countEl,
pvEl: conf.pvEl,
- pvAdd: false
+ pvAdd: false,
})
}
@@ -120,8 +120,12 @@ export default class Artalk {
// ===========================
/** @deprecated Please use `getEl()` instead */
- public get $root() { return this.ctx.$root }
+ public get $root() {
+ return this.ctx.$root
+ }
/** @description Please use `getConf()` instead */
- public get conf() { return this.ctx.getConf() }
+ public get conf() {
+ return this.ctx.getConf()
+ }
}
diff --git a/ui/artalk/src/comment/actions.ts b/ui/artalk/src/comment/actions.ts
index f5177e87a..67240bf54 100644
--- a/ui/artalk/src/comment/actions.ts
+++ b/ui/artalk/src/comment/actions.ts
@@ -5,33 +5,43 @@ import type { CommentNode } from '.'
export default class CommentActions {
private comment: CommentNode
- private get data() { return this.comment.getData() }
- private get opts() { return this.comment.getOpts() }
- private getApi() { return this.comment.getOpts().getApi() }
+ private get data() {
+ return this.comment.getData()
+ }
+ private get opts() {
+ return this.comment.getOpts()
+ }
+ private getApi() {
+ return this.comment.getOpts().getApi()
+ }
public constructor(comment: CommentNode) {
this.comment = comment
}
/** 投票操作 */
- public vote(type: 'up'|'down') {
- const actionBtn = (type === 'up') ? this.comment.getRender().voteBtnUp : this.comment.getRender().voteBtnDown
+ public vote(type: 'up' | 'down') {
+ const actionBtn =
+ type === 'up' ? this.comment.getRender().voteBtnUp : this.comment.getRender().voteBtnDown
- this.getApi().votes.vote(`comment_${type}`, this.data.id, { ...this.getApi().getUserFields() })
- .then((res) => {
- this.data.vote_up = res.data.up
- this.data.vote_down = res.data.down
- this.comment.getRender().voteBtnUp?.updateText()
- this.comment.getRender().voteBtnDown?.updateText()
- })
- .catch((err) => {
- actionBtn?.setError($t('voteFail'))
- console.log(err)
- })
+ this.getApi()
+ .votes.vote(`comment_${type}`, this.data.id, {
+ ...this.getApi().getUserFields(),
+ })
+ .then((res) => {
+ this.data.vote_up = res.data.up
+ this.data.vote_down = res.data.down
+ this.comment.getRender().voteBtnUp?.updateText()
+ this.comment.getRender().voteBtnDown?.updateText()
+ })
+ .catch((err) => {
+ actionBtn?.setError($t('voteFail'))
+ console.log(err)
+ })
}
/** 管理员 - 评论状态修改 */
- public adminEdit(type: 'collapsed'|'pending'|'pinned', btnElem: ActionBtn) {
+ public adminEdit(type: 'collapsed' | 'pending' | 'pinned', btnElem: ActionBtn) {
if (btnElem.isLoading) return // 若正在修改中
btnElem.setLoading(true, `${$t('editing')}...`)
@@ -46,17 +56,20 @@ export default class CommentActions {
modify.is_pinned = !modify.is_pinned
}
- this.getApi().comments.updateComment(this.data.id, {
- ...modify,
- }).then((res) => {
- btnElem.setLoading(false)
+ this.getApi()
+ .comments.updateComment(this.data.id, {
+ ...modify,
+ })
+ .then((res) => {
+ btnElem.setLoading(false)
- // 刷新当前 Comment UI
- this.comment.setData(res.data)
- }).catch((err) => {
- console.error(err)
- btnElem.setError($t('editFail'))
- })
+ // 刷新当前 Comment UI
+ this.comment.setData(res.data)
+ })
+ .catch((err) => {
+ console.error(err)
+ btnElem.setError($t('editFail'))
+ })
}
/** 管理员 - 评论删除 */
@@ -64,7 +77,8 @@ export default class CommentActions {
if (btnElem.isLoading) return // 若正在删除中
btnElem.setLoading(true, `${$t('deleting')}...`)
- this.getApi().comments.deleteComment(this.data.id)
+ this.getApi()
+ .comments.deleteComment(this.data.id)
.then(() => {
btnElem.setLoading(false)
if (this.opts.onDelete) this.opts.onDelete(this.comment)
diff --git a/ui/artalk/src/comment/comment-node.ts b/ui/artalk/src/comment/comment-node.ts
index eee35d570..868b45aa6 100644
--- a/ui/artalk/src/comment/comment-node.ts
+++ b/ui/artalk/src/comment/comment-node.ts
@@ -42,7 +42,7 @@ export default class CommentNode {
private data: CommentData
private opts: CommentOptions
- private parent: CommentNode|null
+ private parent: CommentNode | null
private children: CommentNode[] = []
private nestCurt: number // 当前嵌套层数
@@ -122,7 +122,7 @@ export default class CommentNode {
}
/** 置入子评论 */
- public putChild(childNode: CommentNode, insertMode: 'append'|'prepend' = 'append') {
+ public putChild(childNode: CommentNode, insertMode: 'append' | 'prepend' = 'append') {
childNode.parent = this
childNode.nestCurt = this.nestCurt + 1 // 嵌套层数 +1
this.children.push(childNode)
@@ -133,7 +133,7 @@ export default class CommentNode {
else if (insertMode === 'prepend') $childrenWrap.prepend($childComment)
childNode.getRender().playFadeAnim()
- childNode.getRender().checkHeightLimit() // 内容限高
+ childNode.getRender().checkHeightLimit() // 内容限高
}
/** 获取存放子评论的元素对象 */
@@ -188,7 +188,8 @@ export default class CommentNode {
}
scrollIntoView() {
- this.$el && Ui.scrollIntoView(this.$el, false, this.opts.scrollRelativeTo && this.opts.scrollRelativeTo())
+ this.$el &&
+ Ui.scrollIntoView(this.$el, false, this.opts.scrollRelativeTo && this.opts.scrollRelativeTo())
}
/**
@@ -222,7 +223,7 @@ export default class CommentNode {
const info = UADetect(this.data.ua)
return {
browser: `${info.browser} ${info.version}`,
- os: `${info.os} ${info.osVersion}`
+ os: `${info.os} ${info.osVersion}`,
}
}
diff --git a/ui/artalk/src/comment/height-limit.ts b/ui/artalk/src/comment/height-limit.ts
index 6bfe733d0..84bbb7629 100644
--- a/ui/artalk/src/comment/height-limit.ts
+++ b/ui/artalk/src/comment/height-limit.ts
@@ -10,7 +10,7 @@ export interface IHeightLimitConf {
export interface IHeightLimitRule {
/** Target element need to check */
- el: HTMLElement|null|undefined
+ el: HTMLElement | null | undefined
/** Max height (unit: px) */
max: number
@@ -23,15 +23,16 @@ export type THeightLimitRuleSet = IHeightLimitRule[]
/** Check all elements below the max height limit */
export function check(conf: IHeightLimitConf, rules: THeightLimitRuleSet) {
- rules.forEach(({
- el, max: maxHeight, imgContains
- }) => {
+ rules.forEach(({ el, max: maxHeight, imgContains }) => {
const _apply = () => {
if (!el) return
if (!conf.scrollable)
- applyHeightLimit({ el, maxHeight, postBtnClick: conf.postExpandBtnClick })
- else
- applyScrollableHeightLimit({ el, maxHeight })
+ applyHeightLimit({
+ el,
+ maxHeight,
+ postBtnClick: conf.postExpandBtnClick,
+ })
+ else applyScrollableHeightLimit({ el, maxHeight })
}
// checking
@@ -39,7 +40,8 @@ export function check(conf: IHeightLimitConf, rules: THeightLimitRuleSet) {
if (el && Utils.getHeight(el) > maxHeight) _apply() // 是否超过高度
}
_check() // check now
- if (imgContains && el) // check again if img contains
+ if (imgContains && el)
+ // check again if img contains
Utils.onImagesLoaded(el, () => _check())
})
}
@@ -49,8 +51,8 @@ const HEIGHT_LIMIT_CSS = 'atk-height-limit'
/** Apply height limit on an element and add expand btn */
export function applyHeightLimit(obj: {
- el: HTMLElement,
- maxHeight: number,
+ el: HTMLElement
+ maxHeight: number
postBtnClick?: (e: MouseEvent) => void
}) {
if (!obj.el) return
@@ -62,7 +64,9 @@ export function applyHeightLimit(obj: {
obj.el.style.overflow = 'hidden'
/* Expand button */
- const $expandBtn = Utils.createElement(`
- 一款简洁的自托管评论系统 |
-
- 
- 
- 
- 
- 
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
- Blink
-
-
-
-
+ })
+
+ // Listen
+ try {
+ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+ const newColorScheme = e.matches ? 'dark' : 'light'
+ if (newColorScheme == 'dark') {
+ darkMode = true
+ } else {
+ darkMode = false
+ }
+
+ checkAndApplyDarkMode()
+ })
+ } catch {}
+ })()
+
+
diff --git a/ui/artalk/playwright.config.ts b/ui/artalk/playwright.config.ts
index a7fb70fd8..780da0432 100644
--- a/ui/artalk/playwright.config.ts
+++ b/ui/artalk/playwright.config.ts
@@ -34,14 +34,17 @@ export default defineConfig({
},
],
// Run your local dev server before starting the tests.
- webServer: [{
- command: 'pnpm dev --port 5173',
- url: 'http://localhost:5173',
- reuseExistingServer: !process.env.CI,
- }, {
- cwd: '../../',
- command: 'make dev',
- url: 'http://localhost:23366',
- reuseExistingServer: !process.env.CI,
- }]
+ webServer: [
+ {
+ command: 'pnpm dev --port 5173',
+ url: 'http://localhost:5173',
+ reuseExistingServer: !process.env.CI,
+ },
+ {
+ cwd: '../../',
+ command: 'make dev',
+ url: 'http://localhost:23366',
+ reuseExistingServer: !process.env.CI,
+ },
+ ],
})
diff --git a/ui/artalk/postcss.config.js b/ui/artalk/postcss.config.js
index c66e779e8..b7fc12838 100644
--- a/ui/artalk/postcss.config.js
+++ b/ui/artalk/postcss.config.js
@@ -1,5 +1,5 @@
import autoprefixer from 'autoprefixer'
export default {
- plugins: [ autoprefixer ]
+ plugins: [autoprefixer],
}
diff --git a/ui/artalk/scripts/build-i18n.ts b/ui/artalk/scripts/build-i18n.ts
index 356b20997..5d1ba37b5 100644
--- a/ui/artalk/scripts/build-i18n.ts
+++ b/ui/artalk/scripts/build-i18n.ts
@@ -13,12 +13,12 @@ fs.rmSync(outDir, { recursive: true, force: true })
const libraries: LibraryOptions[] = []
-fs.readdirSync(i18nPath).forEach(f => {
+fs.readdirSync(i18nPath).forEach((f) => {
if (['index.ts', 'external.ts'].includes(f)) return
const filename = path.join(i18nPath, f)
const lang = path.parse(filename).name
- const content = fs.readFileSync(filename);
+ const content = fs.readFileSync(filename)
// only compile the external locale
if (!content.toString().includes('defineLocaleExternal')) return
diff --git a/ui/artalk/src/api/fetch.ts b/ui/artalk/src/api/fetch.ts
index 75d6425f7..5cc9fc012 100644
--- a/ui/artalk/src/api/fetch.ts
+++ b/ui/artalk/src/api/fetch.ts
@@ -3,11 +3,15 @@ import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'
import { FetchError } from '@/types'
import { ApiOptions } from './options'
-export const Fetch = async (opts: ApiOptions, input: string | URL | Request, init?: RequestInit) => {
+export const Fetch = async (
+ opts: ApiOptions,
+ input: string | URL | Request,
+ init?: RequestInit,
+) => {
const apiToken = opts.getApiToken && opts.getApiToken()
const headers = new Headers({
- 'Authorization': apiToken ? `Bearer ${apiToken}` : '',
+ Authorization: apiToken ? `Bearer ${apiToken}` : '',
...init?.headers,
})
@@ -24,13 +28,14 @@ export const Fetch = async (opts: ApiOptions, input: string | URL | Request, ini
const json: any = (await resp.json().catch(() => {})) || {}
let retry = false
- opts.handlers && (await opts.handlers.get().reduce(async (promise, item) => {
- await promise
- if (json[item.action] === true) {
- await item.handler(json)
- retry = true
- }
- }, Promise.resolve()))
+ opts.handlers &&
+ (await opts.handlers.get().reduce(async (promise, item) => {
+ await promise
+ if (json[item.action] === true) {
+ await item.handler(json)
+ retry = true
+ }
+ }, Promise.resolve()))
if (retry) return Fetch(opts, input, init)
throw createError(resp.status, json)
diff --git a/ui/artalk/src/api/handler.ts b/ui/artalk/src/api/handler.ts
index efc7ae793..a5ede934b 100644
--- a/ui/artalk/src/api/handler.ts
+++ b/ui/artalk/src/api/handler.ts
@@ -1,7 +1,7 @@
export interface ApiHandlerPayload {
- 'need_captcha': { img_data?: string; iframe?: string }
- 'need_login': {}
- 'need_auth_login': {}
+ need_captcha: { img_data?: string; iframe?: string }
+ need_login: {}
+ need_auth_login: {}
}
type PayloadKey = keyof ApiHandlerPayload
@@ -12,14 +12,19 @@ export interface ApiHandler${$t('readMore')}`)
+ const $expandBtn = Utils.createElement(
+ `(
- ``
+ ``,
)
btn.onclick = this.onBtnClick(handler)
this.$actions.appendChild(btn)
@@ -43,7 +43,7 @@ export default class Dialog {
/** 按钮 · 取消 */
public setNo(handler: BtnClickHandler) {
const btn = Utils.createElement(
- ``
+ ``,
)
btn.onclick = this.onBtnClick(handler)
this.$actions.appendChild(btn)
diff --git a/ui/artalk/src/components/error-dialog.ts b/ui/artalk/src/components/error-dialog.ts
index 54cace3d2..61a45d6eb 100644
--- a/ui/artalk/src/components/error-dialog.ts
+++ b/ui/artalk/src/components/error-dialog.ts
@@ -14,7 +14,8 @@ export interface ErrorDialogOptions {
export function showErrorDialog(opts: ErrorDialogOptions) {
const errEl = Utils.createElement(`
`) - errEl.querySelector('.error-message')!.innerText = `${$t('listLoadFailMsg')}\n${opts.errMsg}`
+ errEl.querySelector('.error-message')!.innerText =
+ `${$t('listLoadFailMsg')}\n${opts.errMsg}`
if (opts.retryFn) {
const $retryBtn = Utils.createElement(`${$t('listRetry')}`)
@@ -23,7 +24,9 @@ export function showErrorDialog(opts: ErrorDialogOptions) {
}
if (opts.onOpenSidebar) {
- const $openSidebar = Utils.createElement(` | ${$t('openName', { name: $t('ctrlCenter') })}`)
+ const $openSidebar = Utils.createElement(
+ ` | ${$t('openName', { name: $t('ctrlCenter') })}`,
+ )
errEl.appendChild($openSidebar)
$openSidebar.onclick = () => opts.onOpenSidebar && opts.onOpenSidebar()
}
diff --git a/ui/artalk/src/components/pagination.ts b/ui/artalk/src/components/pagination.ts
index cb3f8880d..fcb6127d3 100644
--- a/ui/artalk/src/components/pagination.ts
+++ b/ui/artalk/src/components/pagination.ts
@@ -44,7 +44,8 @@ export default class Pagination {
${$t('readMore')}`,
+ )
$expandBtn.onclick = (e) => {
e.stopPropagation()
disposeHeightLimit(obj.el)
@@ -89,10 +93,7 @@ export function disposeHeightLimit($el: HTMLElement) {
const HEIGHT_LIMIT_SCROLL_CSS = 'atk-height-limit-scroll'
/** Apply scrollable height limit */
-export function applyScrollableHeightLimit(obj: {
- el: HTMLElement,
- maxHeight: number
-}) {
+export function applyScrollableHeightLimit(obj: { el: HTMLElement; maxHeight: number }) {
if (!obj.el) return
if (obj.el.classList.contains(HEIGHT_LIMIT_SCROLL_CSS)) return
obj.el.classList.add(HEIGHT_LIMIT_SCROLL_CSS)
diff --git a/ui/artalk/src/comment/render.ts b/ui/artalk/src/comment/render.ts
index 66f729f97..4aeb58a58 100644
--- a/ui/artalk/src/comment/render.ts
+++ b/ui/artalk/src/comment/render.ts
@@ -10,8 +10,12 @@ import loadRenders from './renders'
export default class Render {
public comment: CommentNode
- public get data() { return this.comment.getData() }
- public get opts() { return this.comment.getOpts() }
+ public get data() {
+ return this.comment.getData()
+ }
+ public get opts() {
+ return this.comment.getOpts()
+ }
public $el!: HTMLElement
public $main!: HTMLElement
@@ -20,7 +24,7 @@ export default class Render {
public $headerBadgeWrap!: HTMLElement
public $body!: HTMLElement
public $content!: HTMLElement
- public $childrenWrap!: HTMLElement|null
+ public $childrenWrap!: HTMLElement | null
public $actions!: HTMLElement
public voteBtnUp?: ActionBtn
public voteBtnDown?: ActionBtn
@@ -72,20 +76,24 @@ export default class Render {
const contentMaxH = conf.content
const childrenMaxH = conf.children
- HeightLimit.check({
- postExpandBtnClick: () => {
- // 子评论数仅有 1，直接取消限高
- const children = this.comment.getChildren()
- if (children.length === 1) HeightLimit.disposeHeightLimit(children[0].getRender().$content)
+ HeightLimit.check(
+ {
+ postExpandBtnClick: () => {
+ // 子评论数仅有 1，直接取消限高
+ const children = this.comment.getChildren()
+ if (children.length === 1)
+ HeightLimit.disposeHeightLimit(children[0].getRender().$content)
+ },
+ scrollable: conf.scrollable,
},
- scrollable: conf.scrollable
- }, [
- // 评论内容限高
- { el: this.$content, max: contentMaxH, imgContains: true },
- { el: this.$replyTo, max: contentMaxH, imgContains: true },
- // 子评论区域限高（仅嵌套模式）
- { el: this.$childrenWrap, max: childrenMaxH, imgContains: false }
- ])
+ [
+ // 评论内容限高
+ { el: this.$content, max: contentMaxH, imgContains: true },
+ { el: this.$replyTo, max: contentMaxH, imgContains: true },
+ // 子评论区域限高（仅嵌套模式）
+ { el: this.$childrenWrap, max: childrenMaxH, imgContains: false },
+ ],
+ )
}
/** 子评论区域移除限高 */
diff --git a/ui/artalk/src/comment/renders/actions.ts b/ui/artalk/src/comment/renders/actions.ts
index f45fb0ee0..505178747 100644
--- a/ui/artalk/src/comment/renders/actions.ts
+++ b/ui/artalk/src/comment/renders/actions.ts
@@ -8,15 +8,19 @@ import type Render from '../render'
*/
export default function renderActions(r: Render) {
Object.entries({
- renderVote, renderReply,
+ renderVote,
+ renderReply,
// 管理员操作
- renderCollapse, renderModerator, renderPin, renderEdit, renderDel
+ renderCollapse,
+ renderModerator,
+ renderPin,
+ renderEdit,
+ renderDel,
}).forEach(([name, render]) => {
render(r)
})
}
-
// 操作按钮 - 投票
function renderVote(r: Render) {
if (!r.opts.vote) return // 关闭投票功能
@@ -29,7 +33,9 @@ function renderVote(r: Render) {
// 反对按钮
if (r.opts.voteDown) {
- r.voteBtnDown = new ActionBtn(() => `${$t('voteDown')} (${r.data.vote_down || 0})`).appendTo(r.$actions)
+ r.voteBtnDown = new ActionBtn(() => `${$t('voteDown')} (${r.data.vote_down || 0})`).appendTo(
+ r.$actions,
+ )
r.voteBtnDown.setClick(() => {
r.comment.getActions().vote('down')
})
@@ -52,7 +58,7 @@ function renderReply(r: Render) {
function renderCollapse(r: Render) {
const collapseBtn = new ActionBtn({
text: () => (r.data.is_collapsed ? $t('expand') : $t('collapse')),
- adminOnly: true
+ adminOnly: true,
})
collapseBtn.appendTo(r.$actions)
collapseBtn.setClick(() => {
@@ -64,7 +70,7 @@ function renderCollapse(r: Render) {
function renderModerator(r: Render) {
const pendingBtn = new ActionBtn({
text: () => (r.data.is_pending ? $t('pending') : $t('approved')),
- adminOnly: true
+ adminOnly: true,
})
pendingBtn.appendTo(r.$actions)
pendingBtn.setClick(() => {
@@ -76,7 +82,7 @@ function renderModerator(r: Render) {
function renderPin(r: Render) {
const pinnedBtn = new ActionBtn({
text: () => (r.data.is_pinned ? $t('unpin') : $t('pin')),
- adminOnly: true
+ adminOnly: true,
})
pinnedBtn.appendTo(r.$actions)
pinnedBtn.setClick(() => {
@@ -88,7 +94,7 @@ function renderPin(r: Render) {
function renderEdit(r: Render) {
const editBtn = new ActionBtn({
text: $t('edit'),
- adminOnly: true
+ adminOnly: true,
})
editBtn.appendTo(r.$actions)
editBtn.setClick(() => {
diff --git a/ui/artalk/src/comment/renders/avatar.ts b/ui/artalk/src/comment/renders/avatar.ts
index 1303ee0a6..0fc9dfa8f 100644
--- a/ui/artalk/src/comment/renders/avatar.ts
+++ b/ui/artalk/src/comment/renders/avatar.ts
@@ -12,7 +12,9 @@ export default function renderAvatar(r: Render) {
$avatarImg.src = avatarURLBuilder ? avatarURLBuilder(r.data) : r.comment.getGravatarURL()
if (r.data.link) {
- const $avatarA = Utils.createElement('')
+ const $avatarA = Utils.createElement(
+ '',
+ )
$avatarA.href = Utils.isValidURL(r.data.link) ? r.data.link : `https://${r.data.link}`
$avatarA.append($avatarImg)
$avatar.append($avatarA)
diff --git a/ui/artalk/src/comment/renders/header.ts b/ui/artalk/src/comment/renders/header.ts
index afd190fde..38f73afa1 100644
--- a/ui/artalk/src/comment/renders/header.ts
+++ b/ui/artalk/src/comment/renders/header.ts
@@ -7,7 +7,10 @@ import type Render from '../render'
*/
export default function renderHeader(r: Render) {
Object.entries({
- renderNick, renderVerifyBadge, renderDate, renderUABadge
+ renderNick,
+ renderVerifyBadge,
+ renderDate,
+ renderUABadge,
}).forEach(([name, render]) => {
render(r)
})
@@ -17,7 +20,9 @@ function renderNick(r: Render) {
r.$headerNick = r.$el.querySelector('.atk-nick')!
if (r.data.link) {
- const $nickA = Utils.createElement('')
+ const $nickA = Utils.createElement(
+ '',
+ )
$nickA.innerText = r.data.nick
$nickA.href = Utils.isValidURL(r.data.link) ? r.data.link : `https://${r.data.link}`
r.$headerNick.append($nickA)
@@ -38,7 +43,9 @@ function renderVerifyBadge(ctx: Render) {
$badge.style.backgroundColor = badgeColor || ''
ctx.$headerBadgeWrap.append($badge)
} else if (ctx.data.is_verified) {
- const $verifiedBadge = Utils.createElement(``) // 邮箱验证徽章
+ const $verifiedBadge = Utils.createElement(
+ ``,
+ ) // 邮箱验证徽章
ctx.$headerBadgeWrap.append($verifiedBadge)
}
diff --git a/ui/artalk/src/comment/renders/index.ts b/ui/artalk/src/comment/renders/index.ts
index 9ca482cad..5647cc00d 100644
--- a/ui/artalk/src/comment/renders/index.ts
+++ b/ui/artalk/src/comment/renders/index.ts
@@ -8,12 +8,17 @@ import Pending from './pending'
import Actions from './actions'
const Renders = {
- Avatar, Header, Content, ReplyAt,
- ReplyTo, Pending, Actions
+ Avatar,
+ Header,
+ Content,
+ ReplyAt,
+ ReplyTo,
+ Pending,
+ Actions,
}
export default function loadRenders(r: Render) {
- Object.entries(Renders).forEach(([ name, render ]) => {
+ Object.entries(Renders).forEach(([name, render]) => {
render(r)
})
}
diff --git a/ui/artalk/src/comment/renders/reply-at.ts b/ui/artalk/src/comment/renders/reply-at.ts
index eae0a2966..94c332e8f 100644
--- a/ui/artalk/src/comment/renders/reply-at.ts
+++ b/ui/artalk/src/comment/renders/reply-at.ts
@@ -8,9 +8,13 @@ export default function renderReplyAt(r: Render) {
if (r.opts.flatMode || r.data.rid === 0) return // not 平铺模式 或 根评论
if (!r.opts.replyTo) return
- r.$replyAt = Utils.createElement(``)
+ r.$replyAt = Utils.createElement(
+ ``,
+ )
r.$replyAt.querySelector('.atk-nick')!.innerText = `${r.opts.replyTo.nick}`
- r.$replyAt.onclick = () => { r.comment.getActions().goToReplyComment() }
+ r.$replyAt.onclick = () => {
+ r.comment.getActions().goToReplyComment()
+ }
r.$headerBadgeWrap.insertAdjacentElement('afterend', r.$replyAt)
}
diff --git a/ui/artalk/src/comment/renders/reply-to.ts b/ui/artalk/src/comment/renders/reply-to.ts
index db3dd875a..7c1c9b32f 100644
--- a/ui/artalk/src/comment/renders/reply-to.ts
+++ b/ui/artalk/src/comment/renders/reply-to.ts
@@ -19,7 +19,9 @@ export default function renderReplyTo(r: Render) {
// Comment author name
const $nick = r.$replyTo.querySelector('.atk-nick')!
$nick.innerText = `@${r.opts.replyTo.nick}`
- $nick.onclick = () => { r.comment.getActions().goToReplyComment() }
+ $nick.onclick = () => {
+ r.comment.getActions().goToReplyComment()
+ }
// Comment content
let replyContent = marked(r.opts.replyTo.content)
diff --git a/ui/artalk/src/components/action-btn.ts b/ui/artalk/src/components/action-btn.ts
index 5614f8e0b..61f05d678 100644
--- a/ui/artalk/src/components/action-btn.ts
+++ b/ui/artalk/src/components/action-btn.ts
@@ -26,16 +26,18 @@ export default class ActionBtn {
public msgRecTimer?: number // 消息显示复原定时器
public msgRecTimerFunc?: Function // 消息显示复原操作
- public get isMessaging() { return !!this.msgRecTimer } // 消息正在显示
+ public get isMessaging() {
+ return !!this.msgRecTimer
+ } // 消息正在显示
public isConfirming = false // 正在确认
public confirmRecTimer?: number // 确认消息复原定时器
/** 构造函数 */
- constructor(opts: ActionBtnOptions|string|(() => string)) {
+ constructor(opts: ActionBtnOptions | string | (() => string)) {
this.$el = Utils.createElement(``)
- this.opts = (typeof opts !== 'object') ? ({ text: opts }) : opts
+ this.opts = typeof opts !== 'object' ? { text: opts } : opts
this.$el.innerText = this.getText()
// 仅管理员可操作
@@ -50,7 +52,7 @@ export default class ActionBtn {
/** 获取按钮文字（动态/静态） */
private getText() {
- return (typeof this.opts.text === 'string') ? this.opts.text : this.opts.text()
+ return typeof this.opts.text === 'string' ? this.opts.text : this.opts.text()
}
/** 设置点击事件 */
diff --git a/ui/artalk/src/components/checker/admin.ts b/ui/artalk/src/components/checker/admin.ts
index 6269a62e3..0092010ce 100644
--- a/ui/artalk/src/components/checker/admin.ts
+++ b/ui/artalk/src/components/checker/admin.ts
@@ -6,11 +6,13 @@ const AdminChecker: Checker<{ token: string }> = {
inputType: 'password',
async request(checker, inputVal) {
- return (await checker.getApi().user.login({
- name: checker.getUser().getData().nick,
- email: checker.getUser().getData().email,
- password: inputVal
- })).data
+ return (
+ await checker.getApi().user.login({
+ name: checker.getUser().getData().nick,
+ email: checker.getUser().getData().email,
+ password: inputVal,
+ })
+ ).data
},
body(checker) {
@@ -20,12 +22,12 @@ const AdminChecker: Checker<{ token: string }> = {
onSuccess(checker, res, inputVal, formEl) {
checker.getUser().update({
isAdmin: true,
- token: res.token
+ token: res.token,
})
checker.getOpts().onReload()
},
- onError(checker, err, inputVal, formEl) {}
+ onError(checker, err, inputVal, formEl) {},
}
export default AdminChecker
diff --git a/ui/artalk/src/components/checker/captcha-renders.ts b/ui/artalk/src/components/checker/captcha-renders.ts
index c705fe192..987deb8ef 100644
--- a/ui/artalk/src/components/checker/captcha-renders.ts
+++ b/ui/artalk/src/components/checker/captcha-renders.ts
@@ -7,13 +7,15 @@ import type { CheckerCtx } from '.'
export function imgBody(checker: CheckerCtx) {
// 图片验证方式
const elem = Utils.createElement(
- ` || ''})
${$t('captchaCheck')}`
- );
+ `${$t('captchaCheck')}`,
+ )
// 刷新验证码
elem.querySelector('.atk-captcha-img')!.onclick = () => {
const imgEl = elem.querySelector('.atk-captcha-img')
- checker.getApi().captcha.getCaptcha()
+ checker
+ .getApi()
+ .captcha.getCaptcha()
.then((res) => {
imgEl!.setAttribute('src', res.data.img_data)
})
@@ -27,7 +29,9 @@ export function imgBody(checker: CheckerCtx) {
/** iframe 形式的通用验证服务 */
export function iframeBody(checker: CheckerCtx) {
const $iframeWrap = Utils.createElement(``)
- const $iframe = Utils.createElement(``)
+ const $iframe = Utils.createElement(
+ ``,
+ )
$iframe.style.display = 'none'
Ui.showLoading($iframeWrap, { transparentBg: true })
$iframe.src = checker.getOpts().getCaptchaIframeURL()
@@ -37,14 +41,21 @@ export function iframeBody(checker: CheckerCtx) {
}
$iframeWrap.append($iframe)
- const $closeBtn = Utils.createElement(`('.atk-captcha-img')!.click() // 刷新验证码
formEl.querySelector('input[type="text"]')!.value = '' // 清空输入框输入
- }
+ },
}
export default CaptchaChecker
-
diff --git a/ui/artalk/src/components/checker/index.ts b/ui/artalk/src/components/checker/index.ts
index d67b3ac53..33e6ea217 100644
--- a/ui/artalk/src/components/checker/index.ts
+++ b/ui/artalk/src/components/checker/index.ts
@@ -26,35 +26,36 @@ export interface CheckerLauncherOptions {
}
function wrapPromise
`,
)
// 按钮
@@ -32,7 +32,7 @@ export default class Dialog {
/** 按钮 · 确定 */
public setYes(handler: BtnClickHandler) {
const btn = Utils.createElement`)
+ const $closeBtn = Utils.createElement(
+ `
`,
+ )
$iframeWrap.append($closeBtn)
checker.hideInteractInput()
// 轮询状态
let stop = false // 打断
- const sleep = (ms: number) => new Promise((resolve) => { window.setTimeout(() => { resolve(null) }, ms) })
+ const sleep = (ms: number) =>
+ new Promise((resolve) => {
+ window.setTimeout(() => {
+ resolve(null)
+ }, ms)
+ })
;(async function queryStatus() {
await sleep(1000)
if (stop) return
@@ -52,7 +63,9 @@ export function iframeBody(checker: CheckerCtx) {
try {
const resp = await checker.getApi().captcha.getCaptchaStatus()
isPass = resp.data.is_pass
- } catch { isPass = false }
+ } catch {
+ isPass = false
+ }
if (isPass) {
checker.triggerSuccess()
} else {
diff --git a/ui/artalk/src/components/checker/captcha.ts b/ui/artalk/src/components/checker/captcha.ts
index ca5b5681f..4fc131424 100644
--- a/ui/artalk/src/components/checker/captcha.ts
+++ b/ui/artalk/src/components/checker/captcha.ts
@@ -1,11 +1,10 @@
-
import type { Checker } from '.'
import * as render from './captcha-renders'
const CaptchaChecker: Checker<{}> = {
request(checker, inputVal) {
return checker.getApi().captcha.verifyCaptcha({
- value: inputVal
+ value: inputVal,
})
},
@@ -21,8 +20,7 @@ const CaptchaChecker: Checker<{}> = {
onError(checker, err, inputVal, formEl) {
formEl.querySelector
(fn: (p: P) => void) {
- return (payload: P) => new Promise
`
+
-
`) - errEl.querySelector
-
-
-
+
+
+
diff --git a/ui/artalk/src/editor/editor.ts b/ui/artalk/src/editor/editor.ts
index 83e524588..bee35313b 100644
--- a/ui/artalk/src/editor/editor.ts
+++ b/ui/artalk/src/editor/editor.ts
@@ -9,9 +9,15 @@ class Editor extends Component implements EditorApi {
private ui: EditorUI
private state: EditorStateManager
- getUI() { return this.ui }
- getPlugs() { return this.ctx.get('editorPlugs') }
- getState() { return this.state.get() }
+ getUI() {
+ return this.ui
+ }
+ getPlugs() {
+ return this.ctx.get('editorPlugs')
+ }
+ getState() {
+ return this.state.get()
+ }
constructor(ctx: ContextApi) {
super(ctx)
@@ -55,14 +61,18 @@ class Editor extends Component implements EditorApi {
insertContent(val: string) {
if ((document as any).selection) {
- this.ui.$textarea.focus();
- (document as any).selection.createRange().text = val
+ this.ui.$textarea.focus()
+ ;(document as any).selection.createRange().text = val
this.ui.$textarea.focus()
} else if (this.ui.$textarea.selectionStart || this.ui.$textarea.selectionStart === 0) {
const sStart = this.ui.$textarea.selectionStart
const sEnd = this.ui.$textarea.selectionEnd
const sT = this.ui.$textarea.scrollTop
- this.setContent(this.ui.$textarea.value.substring(0, sStart) + val + this.ui.$textarea.value.substring(sEnd, this.ui.$textarea.value.length))
+ this.setContent(
+ this.ui.$textarea.value.substring(0, sStart) +
+ val +
+ this.ui.$textarea.value.substring(sEnd, this.ui.$textarea.value.length),
+ )
this.ui.$textarea.focus()
this.ui.$textarea.selectionStart = sStart + val.length
this.ui.$textarea.selectionEnd = sStart + val.length
diff --git a/ui/artalk/src/editor/state.ts b/ui/artalk/src/editor/state.ts
index f38db87ff..d3330000e 100644
--- a/ui/artalk/src/editor/state.ts
+++ b/ui/artalk/src/editor/state.ts
@@ -7,7 +7,7 @@ export default class EditorStateManager {
constructor(private editor: Editor) {}
private stateCurt: EditorState = 'normal'
- private stateUnmountFn: (() => void)|null = null
+ private stateUnmountFn: (() => void) | null = null
/** Get current state */
get() {
@@ -20,7 +20,7 @@ export default class EditorStateManager {
* @param state The state to switch
* @param payload The cause of state switch
*/
- switch(state: EditorState, payload?: { $comment: HTMLElement, comment: CommentData }) {
+ switch(state: EditorState, payload?: { $comment: HTMLElement; comment: CommentData }) {
// trigger unmount
if (this.stateUnmountFn) {
this.stateUnmountFn()
@@ -34,13 +34,18 @@ export default class EditorStateManager {
if (state !== 'normal' && payload) {
// move editor position
let moveAfterEl = payload.$comment
- if (!this.editor.conf.flatMode) moveAfterEl = moveAfterEl.querySelector('.atk-footer')!
+ if (!this.editor.conf.flatMode)
+ moveAfterEl = moveAfterEl.querySelector('.atk-footer')!
this.editor.getPlugs()?.get(Mover)?.move(moveAfterEl)
- const $relative = this.editor.ctx.conf.scrollRelativeTo && this.editor.ctx.conf.scrollRelativeTo()
+ const $relative =
+ this.editor.ctx.conf.scrollRelativeTo && this.editor.ctx.conf.scrollRelativeTo()
Ui.scrollIntoView(this.editor.getUI().$el, true, $relative)
- const plugin = this.editor.getPlugs()?.getPlugs().find(p => p.editorStateEffectWhen === state)
+ const plugin = this.editor
+ .getPlugs()
+ ?.getPlugs()
+ .find((p) => p.editorStateEffectWhen === state)
if (plugin && plugin.editorStateEffect) {
this.stateUnmountFn = plugin.editorStateEffect(payload.comment)
}
diff --git a/ui/artalk/src/i18n/external.ts b/ui/artalk/src/i18n/external.ts
index c1d12ba36..c6520114b 100644
--- a/ui/artalk/src/i18n/external.ts
+++ b/ui/artalk/src/i18n/external.ts
@@ -1,10 +1,13 @@
import type { I18n } from '.'
-export const GLOBAL_LOCALES_KEY = "ArtalkI18n"
+export const GLOBAL_LOCALES_KEY = 'ArtalkI18n'
export function defineLocaleExternal(lang: string, locale: I18n, aliases?: string[]) {
if (!window[GLOBAL_LOCALES_KEY]) window[GLOBAL_LOCALES_KEY] = {}
window[GLOBAL_LOCALES_KEY][lang] = locale
- if (aliases) aliases.forEach(l => { window[GLOBAL_LOCALES_KEY][l] = locale })
+ if (aliases)
+ aliases.forEach((l) => {
+ window[GLOBAL_LOCALES_KEY][l] = locale
+ })
return locale
}
diff --git a/ui/artalk/src/i18n/index.ts b/ui/artalk/src/i18n/index.ts
index a187b1e67..f5a33a3ab 100644
--- a/ui/artalk/src/i18n/index.ts
+++ b/ui/artalk/src/i18n/index.ts
@@ -9,7 +9,7 @@ export type * from './en'
// https://en.wikipedia.org/wiki/ISO_639
// https://datatracker.ietf.org/doc/html/rfc5646#section-2.1
export const internal = {
- 'en': en,
+ en,
'en-US': en,
'zh-CN': zhCN,
}
@@ -21,7 +21,7 @@ export function findLocaleSet(lang: string): I18n {
// normalize a key of language to `ISO 639`
lang = lang.replace(
/^([a-zA-Z]+)(-[a-zA-Z]+)?$/,
- (_, p1: string, p2: string) => (p1.toLowerCase() + (p2 || '').toUpperCase())
+ (_, p1: string, p2: string) => p1.toLowerCase() + (p2 || '').toUpperCase(),
)
// internal finding
@@ -42,22 +42,22 @@ export function findLocaleSet(lang: string): I18n {
/**
* System locale setting
*/
-let LocaleConf: I18n|string = 'en'
+let LocaleConf: I18n | string = 'en'
let LocaleDict: I18n = findLocaleSet(LocaleConf) // en by default
/**
* Set system locale
*/
-export function setLocale(locale: I18n|string) {
+export function setLocale(locale: I18n | string) {
if (locale === LocaleConf) return
LocaleConf = locale
- LocaleDict = (typeof locale === 'string') ? findLocaleSet(locale) : locale
+ LocaleDict = typeof locale === 'string' ? findLocaleSet(locale) : locale
}
/**
* Get an i18n message by key
*/
-export function t(key: I18nKeys, args: {[key: string]: string} = {}) {
+export function t(key: I18nKeys, args: { [key: string]: string } = {}) {
let str = LocaleDict?.[key] || key
str = str.replace(/\{\s*(\w+?)\s*\}/g, (_, token) => args[token] || '')
diff --git a/ui/artalk/src/i18n/jp.ts b/ui/artalk/src/i18n/jp.ts
index d6a665456..aeba9984d 100644
--- a/ui/artalk/src/i18n/jp.ts
+++ b/ui/artalk/src/i18n/jp.ts
@@ -1,89 +1,93 @@
import { defineLocaleExternal } from './external'
-export default defineLocaleExternal('jp', {
- /* Editor */
- placeholder: '内容を入力してください...',
- noComment: 'コメントなし',
- send: 'コメントを送信',
- save: 'コメントを保存',
- nick: 'ニックネーム',
- email: 'Eメール',
- link: 'ウェブサイト',
- emoticon: '絵文字',
- preview: 'プレビュー',
- uploadImage: '画像をアップロード',
- uploadFail: 'アップロードに失敗しました',
- commentFail: 'コメントに失敗しました',
- restoredMsg: '内容が自動的に復元されました',
- onlyAdminCanReply: '管理者のみがコメントできます',
- uploadLoginMsg: '名前とメールアドレスを入力してからアップロードしてください',
+export default defineLocaleExternal(
+ 'jp',
+ {
+ /* Editor */
+ placeholder: '内容を入力してください...',
+ noComment: 'コメントなし',
+ send: 'コメントを送信',
+ save: 'コメントを保存',
+ nick: 'ニックネーム',
+ email: 'Eメール',
+ link: 'ウェブサイト',
+ emoticon: '絵文字',
+ preview: 'プレビュー',
+ uploadImage: '画像をアップロード',
+ uploadFail: 'アップロードに失敗しました',
+ commentFail: 'コメントに失敗しました',
+ restoredMsg: '内容が自動的に復元されました',
+ onlyAdminCanReply: '管理者のみがコメントできます',
+ uploadLoginMsg: '名前とメールアドレスを入力してからアップロードしてください',
- /* List */
- counter: '{count}件のコメント',
- sortLatest: '最新',
- sortOldest: '最古',
- sortBest: '人気',
- sortAuthor: '著者',
- openComment: 'コメントを表示',
- closeComment: 'コメントを非表示',
- listLoadFailMsg: 'コメントリストのデータを取得できません',
- listRetry: '再試行するにはクリック',
- loadMore: 'もっと読み込む',
+ /* List */
+ counter: '{count}件のコメント',
+ sortLatest: '最新',
+ sortOldest: '最古',
+ sortBest: '人気',
+ sortAuthor: '著者',
+ openComment: 'コメントを表示',
+ closeComment: 'コメントを非表示',
+ listLoadFailMsg: 'コメントリストのデータを取得できません',
+ listRetry: '再試行するにはクリック',
+ loadMore: 'もっと読み込む',
- /* Comment */
- admin: '管理者',
- reply: '返信',
- voteUp: '賛成',
- voteDown: '反対',
- voteFail: '投票に失敗しました',
- readMore: '続きを読む',
- actionConfirm: '操作を確認',
- collapse: '折り畳む',
- collapsed: '折りたたまれた',
- collapsedMsg: 'このコメントはシステムまたは管理者によって折りたたまれました',
- expand: '展開',
- approved: '承認済み',
- pending: '保留中',
- pendingMsg: '審査中、自分自身のみが表示できます。',
- edit: '編集',
- editCancel: '編集をキャンセル',
- delete: '削除',
- deleteConfirm: '削除を確認',
- pin: 'ピン留め',
- unpin: 'ピン留めを解除',
+ /* Comment */
+ admin: '管理者',
+ reply: '返信',
+ voteUp: '賛成',
+ voteDown: '反対',
+ voteFail: '投票に失敗しました',
+ readMore: '続きを読む',
+ actionConfirm: '操作を確認',
+ collapse: '折り畳む',
+ collapsed: '折りたたまれた',
+ collapsedMsg: 'このコメントはシステムまたは管理者によって折りたたまれました',
+ expand: '展開',
+ approved: '承認済み',
+ pending: '保留中',
+ pendingMsg: '審査中、自分自身のみが表示できます。',
+ edit: '編集',
+ editCancel: '編集をキャンセル',
+ delete: '削除',
+ deleteConfirm: '削除を確認',
+ pin: 'ピン留め',
+ unpin: 'ピン留めを解除',
- /* Time */
- seconds: '秒前',
- minutes: '分前',
- hours: '時間前',
- days: '日前',
- now: 'たった今',
+ /* Time */
+ seconds: '秒前',
+ minutes: '分前',
+ hours: '時間前',
+ days: '日前',
+ now: 'たった今',
- /* Checker */
- adminCheck: '管理者として認証するにはパスワードを入力してください：',
- captchaCheck: '続行するにはキャプチャを入力してください：',
- confirm: '確認',
- cancel: 'キャンセル',
+ /* Checker */
+ adminCheck: '管理者として認証するにはパスワードを入力してください：',
+ captchaCheck: '続行するにはキャプチャを入力してください：',
+ confirm: '確認',
+ cancel: 'キャンセル',
- /* Sidebar */
- msgCenter: '通知センター',
- ctrlCenter: 'コントロールセンター',
- emailVerified: 'メールアドレスが確認されました',
+ /* Sidebar */
+ msgCenter: '通知センター',
+ ctrlCenter: 'コントロールセンター',
+ emailVerified: 'メールアドレスが確認されました',
- /* General */
- frontend: 'フロントエンド',
- backend: 'バックエンド',
- loading: '読み込み中',
- loadFail: '読み込みに失敗しました',
- editing: '編集中',
- editFail: '編集に失敗しました',
- deleting: '削除中',
- deleteFail: '削除に失敗しました',
- reqGot: 'リクエストが受信されました',
- reqAborted: 'リクエストがタイムアウトまたは予期せず中止されました',
- updateMsg: '完全な体験を得るにはArtalk {name}を更新してください',
- currentVersion: '現在のバージョン',
- ignore: '無視',
- open: '開く',
- openName: '{name}を開く',
-}, ['jp-JP'])
+ /* General */
+ frontend: 'フロントエンド',
+ backend: 'バックエンド',
+ loading: '読み込み中',
+ loadFail: '読み込みに失敗しました',
+ editing: '編集中',
+ editFail: '編集に失敗しました',
+ deleting: '削除中',
+ deleteFail: '削除に失敗しました',
+ reqGot: 'リクエストが受信されました',
+ reqAborted: 'リクエストがタイムアウトまたは予期せず中止されました',
+ updateMsg: '完全な体験を得るにはArtalk {name}を更新してください',
+ currentVersion: '現在のバージョン',
+ ignore: '無視',
+ open: '開く',
+ openName: '{name}を開く',
+ },
+ ['jp-JP'],
+)
diff --git a/ui/artalk/src/layer/layer.ts b/ui/artalk/src/layer/layer.ts
index 5592ce2e1..9ccf26d01 100644
--- a/ui/artalk/src/layer/layer.ts
+++ b/ui/artalk/src/layer/layer.ts
@@ -9,9 +9,8 @@ export class Layer {
constructor(
private $el: HTMLElement,
- private opts: LayerOptions
- ) {
- }
+ private opts: LayerOptions,
+ ) {}
setOnAfterHide(func: () => void) {
this.onAfterHide = func
diff --git a/ui/artalk/src/layer/scrollbar-helper.ts b/ui/artalk/src/layer/scrollbar-helper.ts
index bba74bc12..f85a03206 100644
--- a/ui/artalk/src/layer/scrollbar-helper.ts
+++ b/ui/artalk/src/layer/scrollbar-helper.ts
@@ -17,8 +17,11 @@ export function getScrollbarHelper() {
lock() {
document.body.style.overflow = 'hidden'
- const barPaddingRight = parseInt(window.getComputedStyle(document.body, null).getPropertyValue('padding-right'), 10)
+ const barPaddingRight = parseInt(
+ window.getComputedStyle(document.body, null).getPropertyValue('padding-right'),
+ 10,
+ )
document.body.style.paddingRight = `${Ui.getScrollBarWidth() + barPaddingRight || 0}px`
- }
+ },
}
}
diff --git a/ui/artalk/src/layer/sidebar-layer.html b/ui/artalk/src/layer/sidebar-layer.html
index f62ae0686..214ecfd82 100644
--- a/ui/artalk/src/layer/sidebar-layer.html
+++ b/ui/artalk/src/layer/sidebar-layer.html
@@ -1,7 +1,9 @@
diff --git a/ui/artalk/src/layer/sidebar-layer.ts b/ui/artalk/src/layer/sidebar-layer.ts
index e08eb35a1..b9b4ff6c9 100644
--- a/ui/artalk/src/layer/sidebar-layer.ts
+++ b/ui/artalk/src/layer/sidebar-layer.ts
@@ -25,7 +25,9 @@ export default class SidebarLayer extends Component {
}
// event
- this.ctx.on('user-changed', () => { this.refreshOnShow = true })
+ this.ctx.on('user-changed', () => {
+ this.refreshOnShow = true
+ })
}
/** Refresh iFrame on show */
@@ -53,15 +55,18 @@ export default class SidebarLayer extends Component {
const $iframe = this.$iframe!
const iFrameSrc = $iframe.src
if (this.conf.darkMode !== iFrameSrc.includes('darkMode=1')) {
- this.iframeLoad($iframe, (this.conf.darkMode)
- ? iFrameSrc.concat('&darkMode=1')
- : iFrameSrc.replace('&darkMode=1', ''))
+ this.iframeLoad(
+ $iframe,
+ this.conf.darkMode
+ ? iFrameSrc.concat('&darkMode=1')
+ : iFrameSrc.replace('&darkMode=1', ''),
+ )
}
}
// 管理员身份验证 (若身份失效，弹出验证窗口)
this.authCheck({
- onSuccess: () => this.show(conf) // retry show after auth check
+ onSuccess: () => this.show(conf), // retry show after auth check
})
// 执行滑动显示动画
@@ -85,9 +90,11 @@ export default class SidebarLayer extends Component {
// --------------------------------------------------
private async authCheck(opts: { onSuccess: () => void }) {
- const data = (await this.ctx.getApi().user.getUserStatus({
- ...this.ctx.getApi().getUserFields()
- })).data
+ const data = (
+ await this.ctx.getApi().user.getUserStatus({
+ ...this.ctx.getApi().getUserFields(),
+ })
+ ).data
if (data.is_admin && !data.is_login) {
this.refreshOnShow = true
@@ -100,7 +107,7 @@ export default class SidebarLayer extends Component {
},
onCancel: () => {
this.hide()
- }
+ },
})
// hide sidebar layer
@@ -128,26 +135,29 @@ export default class SidebarLayer extends Component {
}
private createIframe(view?: string) {
- const $iframe = Utils.createElement('')
+ const $iframe = Utils.createElement(
+ '',
+ )
// 准备 Iframe 参数
- const baseURL = (import.meta.env.DEV) ? 'http://localhost:23367/'
+ const baseURL = import.meta.env.DEV
+ ? 'http://localhost:23367/'
: Utils.getURLBasedOnApi({
- base: this.ctx.conf.server,
- path: '/sidebar/',
- })
+ base: this.ctx.conf.server,
+ path: '/sidebar/',
+ })
const query: any = {
pageKey: this.conf.pageKey,
site: this.conf.site || '',
user: JSON.stringify(this.ctx.get('user').getData()),
- time: +new Date()
+ time: +new Date(),
}
if (view) query.view = view
if (this.conf.darkMode) query.darkMode = '1'
- const urlParams = new URLSearchParams(query);
+ const urlParams = new URLSearchParams(query)
this.iframeLoad($iframe, `${baseURL}?${urlParams.toString()}`)
return $iframe
diff --git a/ui/artalk/src/layer/wrap.ts b/ui/artalk/src/layer/wrap.ts
index 0c281a613..2c503bda7 100644
--- a/ui/artalk/src/layer/wrap.ts
+++ b/ui/artalk/src/layer/wrap.ts
@@ -9,7 +9,7 @@ export class LayerWrap {
constructor() {
this.$wrap = Utils.createElement(
- ``
+ ``,
)
this.$mask = this.$wrap.querySelector('.atk-layer-mask')!
}
@@ -23,7 +23,7 @@ export class LayerWrap {
// create layer instance
const layer = new Layer(el, {
onHide: () => this.hideWrap(el!),
- onShow: () => this.showWrap()
+ onShow: () => this.showWrap(),
})
// register mask click event
@@ -62,7 +62,11 @@ export class LayerWrap {
hideWrap($el: HTMLElement) {
// if wrap contains more than one item, do not hide entire wrap
- if (this.items.map(l => l.getEl()).filter(e => e !== $el && e.isConnected && e.style.display !== 'none').length > 0) {
+ if (
+ this.items
+ .map((l) => l.getEl())
+ .filter((e) => e !== $el && e.isConnected && e.style.display !== 'none').length > 0
+ ) {
return
}
diff --git a/ui/artalk/src/lib/component.ts b/ui/artalk/src/lib/component.ts
index 6536c4b0f..c1793d250 100644
--- a/ui/artalk/src/lib/component.ts
+++ b/ui/artalk/src/lib/component.ts
@@ -6,9 +6,7 @@ export default abstract class Component {
return this.ctx.conf
}
- public constructor(
- public ctx: ContextApi
- ) {}
+ public constructor(public ctx: ContextApi) {}
getEl() {
return this.$el
diff --git a/ui/artalk/src/lib/event-manager.ts b/ui/artalk/src/lib/event-manager.ts
index 620702bc0..ac23e9fa3 100644
--- a/ui/artalk/src/lib/event-manager.ts
+++ b/ui/artalk/src/lib/event-manager.ts
@@ -1,5 +1,6 @@
export type EventHandler = (payload: T) => void
-export interface Event extends EventOptions {
+export interface Event
+ extends EventOptions {
name: K
handler: EventHandler
}
@@ -8,7 +9,11 @@ export interface EventOptions {
}
export interface EventManagerFuncs {
- on(name: K, handler: EventHandler, opts?: EventOptions): void
+ on(
+ name: K,
+ handler: EventHandler,
+ opts?: EventOptions,
+ ): void
off(name: K, handler: EventHandler): void
trigger(name: K, payload?: PayloadMap[K]): void
}
@@ -19,8 +24,16 @@ export default class EventManager implements EventManagerFuncs(name: K, handler: EventHandler, opts: EventOptions = {}) {
- this.events.push({ name, handler: handler as EventHandler, ...opts })
+ public on(
+ name: K,
+ handler: EventHandler,
+ opts: EventOptions = {},
+ ) {
+ this.events.push({
+ name,
+ handler: handler as EventHandler,
+ ...opts,
+ })
}
/**
@@ -28,8 +41,7 @@ export default class EventManager implements EventManagerFuncs(name: K, handler: EventHandler) {
if (!handler) return // not allow remove all events with same name
- this.events = this.events.filter((evt) =>
- !(evt.name === name && evt.handler === handler))
+ this.events = this.events.filter((evt) => !(evt.name === name && evt.handler === handler))
}
/**
diff --git a/ui/artalk/src/lib/marked-renderer.ts b/ui/artalk/src/lib/marked-renderer.ts
index e0851ab73..10be4c991 100644
--- a/ui/artalk/src/lib/marked-renderer.ts
+++ b/ui/artalk/src/lib/marked-renderer.ts
@@ -8,25 +8,34 @@ export function getRenderer() {
return renderer
}
-export const markedLinkRenderer = (renderer: any, orgLinkRenderer: Function) => (href: string, title: string, text: string): string => {
- const localLink = href?.startsWith(`${window.location.protocol}//${window.location.hostname}`);
- const html = orgLinkRenderer.call(renderer, href, title, text);
- return html.replace(/^
+ (href: string, title: string, text: string): string => {
+ const localLink = href?.startsWith(`${window.location.protocol}//${window.location.hostname}`)
+ const html = orgLinkRenderer.call(renderer, href, title, text)
+ return html.replace(
+ /^ (block: string, lang: string | undefined): string => {
- // Colorize the block only if the language is known to highlight.js
- const realLang = (!lang ? 'plaintext' : lang)
- let colorized = block
- if ((window as any).hljs) {
- if (realLang && (window as any).hljs.getLanguage(realLang)) {
- colorized = (window as any).hljs.highlight(realLang, block).value
+export const markedCodeRenderer =
+ () =>
+ (block: string, lang: string | undefined): string => {
+ // Colorize the block only if the language is known to highlight.js
+ const realLang = !lang ? 'plaintext' : lang
+ let colorized = block
+ if ((window as any).hljs) {
+ if (realLang && (window as any).hljs.getLanguage(realLang)) {
+ colorized = (window as any).hljs.highlight(realLang, block).value
+ }
+ } else {
+ colorized = renderCode(block)
}
- } else {
- colorized = renderCode(block)
- }
- return `
`)
- .replace(/\[(.*?)\]\((.*?)\)/g, (_, text, link) => `${text}`)
- .replace(/\n/g, '
') + return ( + src + // .replace(/\*\*(.*?)\*\*/g, '$1') + .replace( + /```\s*([^]+?.*?[^]+?[^]+?)```/g, + (_, code) => ``)
+ .replace(
+ /\[(.*?)\]\((.*?)\)/g,
+ (_, text, link) => `${text}`,
+ )
+ .replace(/\n/g, '
') + ) } diff --git a/ui/artalk/src/lib/merge-deep.test.ts b/ui/artalk/src/lib/merge-deep.test.ts index 27fc97676..d2939e5a5 100644 --- a/ui/artalk/src/lib/merge-deep.test.ts +++ b/ui/artalk/src/lib/merge-deep.test.ts @@ -8,13 +8,19 @@ describe('Normal operations', () => { }) it('should merge objects (2 levels)', () => { - expect(mergeDeep({ a: { b: 1 } }, { a: { c: 2 } })).toEqual({ a: { b: 1, c: 2 } }) + expect(mergeDeep({ a: { b: 1 } }, { a: { c: 2 } })).toEqual({ + a: { b: 1, c: 2 }, + }) expect(mergeDeep({ a: { b: 1 } }, { a: { b: 2 } })).toEqual({ a: { b: 2 } }) }) it('should merge objects (3 levels)', () => { - expect(mergeDeep({ a: { b: { c: 1 } } }, { a: { b: { d: 2 } } })).toEqual({ a: { b: { c: 1, d: 2 } } }) - expect(mergeDeep({ a: { b: { c: 1 } } }, { a: { b: { c: 2 } } })).toEqual({ a: { b: { c: 2 } } }) + expect(mergeDeep({ a: { b: { c: 1 } } }, { a: { b: { d: 2 } } })).toEqual({ + a: { b: { c: 1, d: 2 } }, + }) + expect(mergeDeep({ a: { b: { c: 1 } } }, { a: { b: { c: 2 } } })).toEqual({ + a: { b: { c: 2 } }, + }) }) }) @@ -23,10 +29,14 @@ describe('Array merge', () => { expect(mergeDeep({ a: [1] }, { a: [2] })).toEqual({ a: [1, 2] }) }) it('should merge arrays (2 levels)', () => { - expect(mergeDeep({ a: { b: [1] } }, { a: { b: [2] } })).toEqual({ a: { b: [1, 2] } }) + expect(mergeDeep({ a: { b: [1] } }, { a: { b: [2] } })).toEqual({ + a: { b: [1, 2] }, + }) }) it('should merge arrays (3 levels)', () => { - expect(mergeDeep({ a: { b: { c: [1] } } }, { a: { b: { c: [2] } } })).toEqual({ a: { b: { c: [1, 2] } } }) + expect(mergeDeep({ a: { b: { c: [1] } } }, { a: { b: { c: [2] } } })).toEqual({ + a: { b: { c: [1, 2] } }, + }) }) }) diff --git a/ui/artalk/src/lib/merge-deep.ts b/ui/artalk/src/lib/merge-deep.ts index ce633b499..34a320ced 100644 --- a/ui/artalk/src/lib/merge-deep.ts +++ b/ui/artalk/src/lib/merge-deep.ts @@ -6,12 +6,12 @@ * @returns New object with merged key/values */ export function mergeDeep(...objects: any[]): T {
- const isObject = (obj: any) => obj && typeof obj === "object" && obj.constructor === Object;
+ const isObject = (obj: any) => obj && typeof obj === 'object' && obj.constructor === Object
return objects.reduce((prev, obj) => {
Object.keys(obj ?? {}).forEach((key) => {
// Avoid prototype pollution
- if (key === "__proto__" || key === "constructor" || key === "prototype") {
+ if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
return
}
diff --git a/ui/artalk/src/lib/sanitizer.ts b/ui/artalk/src/lib/sanitizer.ts
index f702152ef..a92923076 100644
--- a/ui/artalk/src/lib/sanitizer.ts
+++ b/ui/artalk/src/lib/sanitizer.ts
@@ -7,14 +7,56 @@ const insaneOptions = {
// @link https://leucosite.com/Microsoft-Edge-RCE/
// @link https://medium.com/@knownsec404team/analysis-of-the-security-issues-of-url-scheme-in-pc-from-cve-2018-8495-934478a36756
allowedSchemes: [
- 'http', 'https', 'mailto',
- 'data' // for support base64 encoded image (安全性有待考虑)
+ 'http',
+ 'https',
+ 'mailto',
+ 'data', // for support base64 encoded image (安全性有待考虑)
],
allowedTags: [
- 'a', 'abbr', 'article', 'b', 'blockquote', 'br', 'caption', 'code', 'del', 'details', 'div', 'em',
- 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'img', 'ins', 'kbd', 'li', 'main', 'mark',
- 'ol', 'p', 'pre', 'section', 'span', 'strike', 'strong', 'sub', 'summary', 'sup', 'table',
- 'tbody', 'td', 'th', 'thead', 'tr', 'u', 'ul'
+ 'a',
+ 'abbr',
+ 'article',
+ 'b',
+ 'blockquote',
+ 'br',
+ 'caption',
+ 'code',
+ 'del',
+ 'details',
+ 'div',
+ 'em',
+ 'h1',
+ 'h2',
+ 'h3',
+ 'h4',
+ 'h5',
+ 'h6',
+ 'hr',
+ 'i',
+ 'img',
+ 'ins',
+ 'kbd',
+ 'li',
+ 'main',
+ 'mark',
+ 'ol',
+ 'p',
+ 'pre',
+ 'section',
+ 'span',
+ 'strike',
+ 'strong',
+ 'sub',
+ 'summary',
+ 'sup',
+ 'table',
+ 'tbody',
+ 'td',
+ 'th',
+ 'thead',
+ 'tr',
+ 'u',
+ 'ul',
],
allowedAttributes: {
'*': ['title', 'accesskey'],
@@ -24,30 +66,29 @@ const insaneOptions = {
code: ['class'],
span: ['class', 'style'],
},
- filter: node => {
+ filter: (node) => {
// allow hljs style
const allowed = [
- [ 'code', /^hljs\W+language-(.*)$/ ],
- [ 'span', /^(hljs-.*)$/ ]
+ ['code', /^hljs\W+language-(.*)$/],
+ ['span', /^(hljs-.*)$/],
]
- allowed.forEach(([ tag, reg ]) => {
- if (
- node.tag === tag
- && !!node.attrs.class
- && !(reg as RegExp).test(node.attrs.class)
- ) {
+ allowed.forEach(([tag, reg]) => {
+ if (node.tag === tag && !!node.attrs.class && !(reg as RegExp).test(node.attrs.class)) {
delete node.attrs.class
}
})
// allow set color sty
- if (node.tag === 'span' && !!node.attrs.style
- && !/^color:(\W+)?#[0-9a-f]{3,6};?$/i.test(node.attrs.style)) {
+ if (
+ node.tag === 'span' &&
+ !!node.attrs.style &&
+ !/^color:(\W+)?#[0-9a-f]{3,6};?$/i.test(node.attrs.style)
+ ) {
delete node.attrs.style
}
return true
- }
+ },
}
export function sanitize(content: string): string {
diff --git a/ui/artalk/src/lib/ui.ts b/ui/artalk/src/lib/ui.ts
index a04b07e63..f88ae771d 100644
--- a/ui/artalk/src/lib/ui.ts
+++ b/ui/artalk/src/lib/ui.ts
@@ -7,11 +7,12 @@ export function showLoading(parentElem: HTMLElement, conf?: { transparentBg?: bo
let $loading = parentElem.querySelector(':scope > .atk-loading')
if (!$loading) {
$loading = Utils.createElement(
- ``,
+ )
if (conf?.transparentBg) $loading.style.background = 'transparent'
parentElem.appendChild($loading)
}
@@ -50,17 +51,26 @@ export function isVisible(el: HTMLElement, viewport: HTMLElement = document.docu
const elemTop = rect.top + docViewTop
const elemBottom = elemTop + rect.height
- return (elemBottom <= docViewBottom) //&& (elemTop >= docViewTop) 注释因为假如 el 比 viewport 还高就会失效
+ return elemBottom <= docViewBottom //&& (elemTop >= docViewTop) 注释因为假如 el 比 viewport 还高就会失效
}
/** 滚动到元素中心 */
-export function scrollIntoView(elem: HTMLElement, enableAnim: boolean = true, relativeTo?: HTMLElement) {
+export function scrollIntoView(
+ elem: HTMLElement,
+ enableAnim: boolean = true,
+ relativeTo?: HTMLElement,
+) {
let top: number
if (relativeTo) {
const containerRect = relativeTo.getBoundingClientRect()
const elementRect = elem.getBoundingClientRect()
- top = elementRect.top - containerRect.top + relativeTo.scrollTop - relativeTo.clientHeight / 2 + elem.clientHeight / 2
+ top =
+ elementRect.top -
+ containerRect.top +
+ relativeTo.scrollTop -
+ relativeTo.clientHeight / 2 +
+ elem.clientHeight / 2
} else {
const rect = elem.getBoundingClientRect()
const elemTop = rect.top + window.scrollY
@@ -68,9 +78,10 @@ export function scrollIntoView(elem: HTMLElement, enableAnim: boolean = true, re
}
const scrollOptions: ScrollToOptions = {
- top, left: 0,
+ top,
+ left: 0,
// behavior: enableAnim ? 'smooth' : 'instant',
- behavior: 'instant'
+ behavior: 'instant',
}
if (relativeTo) relativeTo.scroll(scrollOptions)
@@ -78,16 +89,12 @@ export function scrollIntoView(elem: HTMLElement, enableAnim: boolean = true, re
}
/** 显示消息 */
-export function showNotify(
- wrapElem: HTMLElement,
- msg: string,
- type: NotifyLevel,
-) {
+export function showNotify(wrapElem: HTMLElement, msg: string, type: NotifyLevel) {
const colors = { s: '#57d59f', e: '#ff6f6c', w: '#ffc721', i: '#2ebcfc' }
const timeout = 3000 // 持续显示时间 ms
const notifyElem = Utils.createElement(
- `('.atk-notify-content')!
notifyContentEl.innerHTML = Utils.htmlEncode(msg).replace('\n', '
') @@ -115,11 +122,7 @@ export function showNotify( } /** fade 动画 */ -export function playFadeAnim( - elem: HTMLElement, - after?: () => void, - type: 'in' | 'out' = 'in' -) { +export function playFadeAnim(elem: HTMLElement, after?: () => void, type: 'in' | 'out' = 'in') { elem.classList.add(`atk-fade-${type}`) // 动画结束清除 class const onAnimEnded = () => { @@ -141,7 +144,11 @@ export function playFadeOutAnim(elem: HTMLElement, after?: () => void) { } /** 设置全局错误 */ -export function setError(parentElem: HTMLElement, html: string | HTMLElement | null, title: string = 'Artalk Error') { +export function setError( + parentElem: HTMLElement, + html: string | HTMLElement | null, + title: string = 'Artalk Error', +) { let elem = parentElem.querySelector('.atk-error-layer')
if (html === null) {
if (elem !== null) elem.remove()
@@ -149,7 +156,7 @@ export function setError(parentElem: HTMLElement, html: string | HTMLElement | n
}
if (!elem) {
elem = Utils.createElement(
- `(ctx: ContextApi, keys: T, effect: (conf: Pick) => void): void {
+export function watchConf(
+ ctx: ContextApi,
+ keys: T,
+ effect: (conf: Pick) => void,
+): void {
const deepEqual = (a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)
const val = () => {
const conf = ctx.getConf()
const res: any = {}
- keys.forEach((key) => { res[key] = conf[key] })
+ keys.forEach((key) => {
+ res[key] = conf[key]
+ })
return res
}
let lastVal: any = null
diff --git a/ui/artalk/src/list/comment.ts b/ui/artalk/src/list/comment.ts
index 12e54c30e..6d9fd1f6e 100644
--- a/ui/artalk/src/list/comment.ts
+++ b/ui/artalk/src/list/comment.ts
@@ -5,7 +5,12 @@ interface CreateCommentNodeOptions {
forceFlatMode?: boolean
}
-export function createCommentNode(ctx: ContextApi, comment: CommentData, replyComment?: CommentData, opts?: CreateCommentNodeOptions): CommentNode {
+export function createCommentNode(
+ ctx: ContextApi,
+ comment: CommentData,
+ replyComment?: CommentData,
+ opts?: CreateCommentNodeOptions,
+): CommentNode {
const instance = new CommentNode(comment, {
onAfterRender: () => {
ctx.trigger('comment-rendered', instance)
@@ -17,7 +22,10 @@ export function createCommentNode(ctx: ContextApi, comment: CommentData, replyCo
replyTo: replyComment,
// TODO simplify reference
- flatMode: typeof opts?.forceFlatMode === 'boolean' ? opts?.forceFlatMode : ctx.conf.flatMode as boolean,
+ flatMode:
+ typeof opts?.forceFlatMode === 'boolean'
+ ? opts?.forceFlatMode
+ : (ctx.conf.flatMode as boolean),
gravatar: ctx.conf.gravatar,
nestMax: ctx.conf.nestMax,
heightLimit: ctx.conf.heightLimit,
@@ -30,7 +38,7 @@ export function createCommentNode(ctx: ContextApi, comment: CommentData, replyCo
// TODO: move to plugin folder and remove from core
getApi: () => ctx.getApi(),
replyComment: (c, $el) => ctx.replyComment(c, $el),
- editComment: (c, $el) => ctx.editComment(c, $el)
+ editComment: (c, $el) => ctx.editComment(c, $el),
})
// 渲染元素
diff --git a/ui/artalk/src/list/layout/flat.ts b/ui/artalk/src/list/layout/flat.ts
index eaebff77a..24ae3bffd 100644
--- a/ui/artalk/src/list/layout/flat.ts
+++ b/ui/artalk/src/list/layout/flat.ts
@@ -5,18 +5,24 @@ import type { LayoutStrategyCreator, LayoutOptions } from '.'
export const createFlatStrategy: LayoutStrategyCreator = (opts) => ({
import: (comments) => {
comments.forEach((comment: CommentData) => {
- const replyComment = (comment.rid === 0 ? undefined : comments.find(c => c.id === comment.rid))
+ const replyComment =
+ comment.rid === 0 ? undefined : comments.find((c) => c.id === comment.rid)
insertComment(opts, 'append', comment, replyComment)
})
},
insert: (comment, replyComment) => {
const node = insertComment(opts, 'prepend', comment, replyComment)
node.scrollIntoView()
- }
+ },
})
/** 导入评论 · 平铺模式 */
-function insertComment(opts: LayoutOptions, insertMode: 'append'|'prepend', comment: CommentData, replyComment?: CommentData | undefined) {
+function insertComment(
+ opts: LayoutOptions,
+ insertMode: 'append' | 'prepend',
+ comment: CommentData,
+ replyComment?: CommentData | undefined,
+) {
if (comment.is_collapsed) comment.is_allow_reply = false
const node = opts.createCommentNode(comment, replyComment)
diff --git a/ui/artalk/src/list/layout/index.ts b/ui/artalk/src/list/layout/index.ts
index 284eb9b53..286a63158 100644
--- a/ui/artalk/src/list/layout/index.ts
+++ b/ui/artalk/src/list/layout/index.ts
@@ -12,7 +12,7 @@ export interface LayoutOptions {
flatMode: boolean
createCommentNode(comment: CommentData, replyComment?: CommentData): CommentNode
- findCommentNode(id: number): CommentNode|undefined
+ findCommentNode(id: number): CommentNode | undefined
}
export interface LayoutStrategy {
@@ -26,7 +26,9 @@ export class ListLayout {
constructor(private options: LayoutOptions) {}
private getStrategy() {
- return this.options.flatMode ? createFlatStrategy(this.options) : createNestStrategy(this.options)
+ return this.options.flatMode
+ ? createFlatStrategy(this.options)
+ : createNestStrategy(this.options)
}
import(comments: CommentData[]) {
diff --git a/ui/artalk/src/list/layout/nest.ts b/ui/artalk/src/list/layout/nest.ts
index 5171af76d..b32370579 100644
--- a/ui/artalk/src/list/layout/nest.ts
+++ b/ui/artalk/src/list/layout/nest.ts
@@ -44,7 +44,7 @@ export const createNestStrategy: LayoutStrategyCreator = (opts) => ({
// 子评论 新增
const parent = opts.findCommentNode(comment.rid)
if (parent) {
- parent.putChild(node, (opts.nestSortBy === 'DATE_ASC' ? 'append' : 'prepend'))
+ parent.putChild(node, opts.nestSortBy === 'DATE_ASC' ? 'append' : 'prepend')
// 若父评论存在 “子评论部分” 限高，取消限高
node.getParents().forEach((p) => {
@@ -57,5 +57,5 @@ export const createNestStrategy: LayoutStrategyCreator = (opts) => ({
node.scrollIntoView() // 滚动到可以见
node.getRender().playFadeAnim() // 播放评论渐出动画
- }
+ },
})
diff --git a/ui/artalk/src/list/list.html b/ui/artalk/src/list/list.html
index c3b842f4a..3f99a8fe0 100644
--- a/ui/artalk/src/list/list.html
+++ b/ui/artalk/src/list/list.html
@@ -6,7 +6,7 @@
): Paginato
return new UpDownPaginator()
}
-function getPageDataByLastData(ctx: ContextApi): { offset: number, total: number } {
+function getPageDataByLastData(ctx: ContextApi): {
+ offset: number
+ total: number
+} {
const last = ctx.getData().getListLastFetch()
const r = { offset: 0, total: 0 }
if (!last) return r
@@ -21,7 +24,7 @@ function getPageDataByLastData(ctx: ContextApi): { offset: number, total: number
}
export const initListPaginatorFunc = (ctx: ContextApi) => {
- let paginator: Paginator|null = null
+ let paginator: Paginator | null = null
// Init paginator when conf loaded
ctx.watchConf(['pagination', 'locale'], (conf) => {
@@ -35,7 +38,9 @@ export const initListPaginatorFunc = (ctx: ContextApi) => {
// create paginator dom
const { offset, total } = getPageDataByLastData(ctx)
const $paginator = paginator.create({
- ctx, pageSize: conf.pagination.pageSize, total,
+ ctx,
+ pageSize: conf.pagination.pageSize,
+ total,
readMoreAutoLoad: conf.pagination.autoLoad,
})
diff --git a/ui/artalk/src/list/paginator/up-down.ts b/ui/artalk/src/list/paginator/up-down.ts
index 88f9c5edc..081103255 100644
--- a/ui/artalk/src/list/paginator/up-down.ts
+++ b/ui/artalk/src/list/paginator/up-down.ts
@@ -17,9 +17,9 @@ export default class UpDownPaginator implements Paginator {
offset: o,
onSuccess: () => {
opt.ctx.listGotoFirst()
- }
+ },
})
- }
+ },
})
return this.instance.$el
diff --git a/ui/artalk/src/load.ts b/ui/artalk/src/load.ts
index 96050f832..bdec5c094 100644
--- a/ui/artalk/src/load.ts
+++ b/ui/artalk/src/load.ts
@@ -6,7 +6,7 @@ import { DefaultPlugins } from './plugins'
/**
* Global Plugins for all Artalk instances
*/
-export const GlobalPlugins: ArtalkPlugin[] = [ ...DefaultPlugins ]
+export const GlobalPlugins: ArtalkPlugin[] = [...DefaultPlugins]
export async function load(ctx: ContextApi) {
const loadedPlugins: ArtalkPlugin[] = []
@@ -23,10 +23,13 @@ export async function load(ctx: ContextApi) {
loadPlugins(GlobalPlugins)
// Get conf from server
- const { data } = await ctx.getApi().conf.conf().catch((err) => {
- onLoadErr(ctx, err)
- throw err
- })
+ const { data } = await ctx
+ .getApi()
+ .conf.conf()
+ .catch((err) => {
+ onLoadErr(ctx, err)
+ throw err
+ })
// Initial config
let conf: Partial = {
@@ -35,7 +38,10 @@ export async function load(ctx: ContextApi) {
// Reference conf from backend
if (ctx.conf.useBackendConf) {
- if (!data.frontend_conf) throw new Error('The remote backend does not respond to the frontend conf, but `useBackendConf` conf is enabled')
+ if (!data.frontend_conf)
+ throw new Error(
+ 'The remote backend does not respond to the frontend conf, but `useBackendConf` conf is enabled',
+ )
conf = { ...conf, ...handleConfFormServer(data.frontend_conf) }
}
@@ -43,11 +49,14 @@ export async function load(ctx: ContextApi) {
ctx.conf.remoteConfModifier && ctx.conf.remoteConfModifier(conf)
// Dynamically load network plugins
- conf.pluginURLs && await loadNetworkPlugins(conf.pluginURLs, ctx.conf.server).then((plugins) => {
- loadPlugins(plugins)
- }).catch((err) => {
- console.error('Failed to load plugin', err)
- })
+ conf.pluginURLs &&
+ (await loadNetworkPlugins(conf.pluginURLs, ctx.conf.server)
+ .then((plugins) => {
+ loadPlugins(plugins)
+ })
+ .catch((err) => {
+ console.error('Failed to load plugin', err)
+ }))
// After all plugins are loaded
ctx.trigger('created')
@@ -59,7 +68,8 @@ export async function load(ctx: ContextApi) {
ctx.trigger('mounted')
// Load comment list
- if (!ctx.conf.remoteConfModifier) { // only auto fetch when no remoteConfModifier
+ if (!ctx.conf.remoteConfModifier) {
+ // only auto fetch when no remoteConfModifier
ctx.fetch({ offset: 0 })
}
}
@@ -77,20 +87,22 @@ async function loadNetworkPlugins(scripts: string[], apiBase: string): Promise((resolve, reject) => {
- // check if loaded
- if (document.querySelector(`script[src="${url}"]`)) {
- resolve()
- return
- }
-
- // load script
- const script = document.createElement('script')
- script.src = url
- document.head.appendChild(script)
- script.onload = () => resolve()
- script.onerror = (err) => reject(err)
- }))
+ tasks.push(
+ new Promise((resolve, reject) => {
+ // check if loaded
+ if (document.querySelector(`script[src="${url}"]`)) {
+ resolve()
+ return
+ }
+
+ // load script
+ const script = document.createElement('script')
+ script.src = url
+ document.head.appendChild(script)
+ script.onload = () => resolve()
+ script.onerror = (err) => reject(err)
+ }),
+ )
})
await Promise.all(tasks)
@@ -103,7 +115,10 @@ export function onLoadErr(ctx: ContextApi, err: any) {
// if response err_no_site, modify the sidebar open view to create site
if (err.data?.err_no_site) {
- const viewLoadParam = { create_name: ctx.conf.site, create_urls: `${window.location.protocol}//${window.location.host}` }
+ const viewLoadParam = {
+ create_name: ctx.conf.site,
+ create_urls: `${window.location.protocol}//${window.location.host}`,
+ }
sidebarOpenView = `sites|${JSON.stringify(viewLoadParam)}`
}
@@ -112,8 +127,11 @@ export function onLoadErr(ctx: ContextApi, err: any) {
errMsg: err.msg || String(err),
errData: err.data,
retryFn: () => load(ctx),
- onOpenSidebar: ctx.get('user').getData().isAdmin ? () => ctx.showSidebar({
- view: sidebarOpenView as any
- }) : undefined // only show open sidebar button when user is admin
+ onOpenSidebar: ctx.get('user').getData().isAdmin
+ ? () =>
+ ctx.showSidebar({
+ view: sidebarOpenView as any,
+ })
+ : undefined, // only show open sidebar button when user is admin
})
}
diff --git a/ui/artalk/src/plugins/admin-only-elem.ts b/ui/artalk/src/plugins/admin-only-elem.ts
index 917e80737..d9ed6b312 100644
--- a/ui/artalk/src/plugins/admin-only-elem.ts
+++ b/ui/artalk/src/plugins/admin-only-elem.ts
@@ -2,9 +2,12 @@ import type { ArtalkPlugin } from '@/types'
export const AdminOnlyElem: ArtalkPlugin = (ctx) => {
const scanApply = () => {
- applyAdminOnlyEls(ctx.get('user').getData().isAdmin, getAdminOnlyEls({
- $root: ctx.$root
- }))
+ applyAdminOnlyEls(
+ ctx.get('user').getData().isAdmin,
+ getAdminOnlyEls({
+ $root: ctx.$root,
+ }),
+ )
}
ctx.on('list-loaded', () => {
@@ -20,14 +23,19 @@ function getAdminOnlyEls(opts: { $root: HTMLElement }): HTMLElement[] {
const els: HTMLElement[] = []
// elements in $root
- opts.$root.querySelectorAll(`[atk-only-admin-show]`).forEach(item => els.push(item))
+ opts.$root
+ .querySelectorAll(`[atk-only-admin-show]`)
+ .forEach((item) => els.push(item))
// TODO: provide a Artalk.conf hook to set whitelist of admin-only elements,
// and move following code to that hook (move into @artalk/artalk-sidebar)
// elements in sidebar
const $sidebarEl = document.querySelector('.atk-sidebar')
- if ($sidebarEl) $sidebarEl.querySelectorAll(`[atk-only-admin-show]`).forEach(item => els.push(item))
+ if ($sidebarEl)
+ $sidebarEl
+ .querySelectorAll(`[atk-only-admin-show]`)
+ .forEach((item) => els.push(item))
return els
}
diff --git a/ui/artalk/src/plugins/dark-mode.ts b/ui/artalk/src/plugins/dark-mode.ts
index 064e698fe..7f26c7fb7 100644
--- a/ui/artalk/src/plugins/dark-mode.ts
+++ b/ui/artalk/src/plugins/dark-mode.ts
@@ -7,7 +7,7 @@ let darkModeMedia: MediaQueryList | undefined
function updateClassnames($els: HTMLElement[], darkMode: boolean) {
const DarkModeClassName = 'atk-dark-mode'
- $els.forEach($el => {
+ $els.forEach(($el) => {
if (darkMode) $el.classList.add(DarkModeClassName)
else $el.classList.remove(DarkModeClassName)
})
@@ -17,7 +17,7 @@ export const DarkMode: ArtalkPlugin = (ctx) => {
// the handler bind to Artalk instance, don't forget to remove it when Artalk instance destroyed
let darkModeAutoHandler: ((evt: MediaQueryListEvent) => void) | undefined
- const sync = (darkMode: boolean|'auto') => {
+ const sync = (darkMode: boolean | 'auto') => {
// the elements that classnames need to be updated when darkMode changed
const $els = [ctx.$root, ctx.get('layerManager').getEl()]
diff --git a/ui/artalk/src/plugins/editor-kit.ts b/ui/artalk/src/plugins/editor-kit.ts
index bbd462093..30fbdaa5e 100644
--- a/ui/artalk/src/plugins/editor-kit.ts
+++ b/ui/artalk/src/plugins/editor-kit.ts
@@ -5,10 +5,10 @@ import EditorPlug from './editor/_plug'
import PlugKit from './editor/_kit'
export interface EditorEventPayloadMap {
- 'mounted': undefined
- 'unmounted': undefined
- 'header-input': { field: string, $input: HTMLInputElement }
- 'header-change': { field: string, $input: HTMLInputElement }
+ mounted: undefined
+ unmounted: undefined
+ 'header-input': { field: string; $input: HTMLInputElement }
+ 'header-change': { field: string; $input: HTMLInputElement }
'content-updated': string
'panel-show': EditorPlug
'panel-hide': EditorPlug
@@ -27,11 +27,15 @@ export const EditorKit: ArtalkPlugin = (ctx) => {
export class PlugManager {
private plugs: EditorPlug[] = []
- private openedPlug: EditorPlug|null = null
+ private openedPlug: EditorPlug | null = null
private events = new EventManager()
- getPlugs() { return this.plugs }
- getEvents() { return this.events }
+ getPlugs() {
+ return this.plugs
+ }
+ getEvents() {
+ return this.events
+ }
private clear() {
this.plugs = []
@@ -39,35 +43,33 @@ export class PlugManager {
if (this.openedPlug) this.closePlugPanel()
}
- constructor(
- public editor: EditorApi
- ) {
+ constructor(public editor: EditorApi) {
let confLoaded = false // config not loaded at first time
- this.editor.ctx.watchConf([
- 'imgUpload', 'emoticons', 'preview', 'editorTravel', 'locale'
- ], (conf) => {
- // trigger unmount event will call all plugs' unmount function
- // (this will only be called while conf reloaded, not be called at first time)
- confLoaded && this.getEvents().trigger('unmounted')
-
- // reset the plugs
- this.clear()
-
- // init the all enabled plugs
- getEnabledPlugs(conf)
- .forEach((Plug) => {
+ this.editor.ctx.watchConf(
+ ['imgUpload', 'emoticons', 'preview', 'editorTravel', 'locale'],
+ (conf) => {
+ // trigger unmount event will call all plugs' unmount function
+ // (this will only be called while conf reloaded, not be called at first time)
+ confLoaded && this.getEvents().trigger('unmounted')
+
+ // reset the plugs
+ this.clear()
+
+ // init the all enabled plugs
+ getEnabledPlugs(conf).forEach((Plug) => {
// create the plug instance
const kit = new PlugKit(this)
this.plugs.push(new Plug(kit))
})
- // trigger event for plug initialization
- this.getEvents().trigger('mounted')
- confLoaded = true
+ // trigger event for plug initialization
+ this.getEvents().trigger('mounted')
+ confLoaded = true
- // refresh the plug UI
- this.loadPluginUI()
- })
+ // refresh the plug UI
+ this.loadPluginUI()
+ },
+ )
this.events.on('panel-close', () => this.closePlugPanel())
}
@@ -89,24 +91,26 @@ export class PlugManager {
this.editor.getUI().$plugBtnWrap.appendChild($btn)
// bind the event when click plug btn
- !$btn.onclick && ($btn.onclick = () => {
- // removing the active class from all the buttons
- this.editor.getUI().$plugBtnWrap
- .querySelectorAll('.active')
- .forEach(item => item.classList.remove('active'))
-
- // if the plug is not the same as the openedPlug,
- if (plug !== this.openedPlug) {
- // then open the plug current clicked plug panel
- this.openPlugPanel(plug)
-
- // add active class for current plug panel
- $btn.classList.add('active')
- } else {
- // then close the plug
- this.closePlugPanel()
- }
- })
+ !$btn.onclick &&
+ ($btn.onclick = () => {
+ // removing the active class from all the buttons
+ this.editor
+ .getUI()
+ .$plugBtnWrap.querySelectorAll('.active')
+ .forEach((item) => item.classList.remove('active'))
+
+ // if the plug is not the same as the openedPlug,
+ if (plug !== this.openedPlug) {
+ // then open the plug current clicked plug panel
+ this.openPlugPanel(plug)
+
+ // add active class for current plug panel
+ $btn.classList.add('active')
+ } else {
+ // then close the plug
+ this.closePlugPanel()
+ }
+ })
// initialization of plug panel
const $panel = plug.$panel
@@ -117,7 +121,7 @@ export class PlugManager {
}
get(plug: T) {
- return this.plugs.find(p => p instanceof plug) as InstanceType | undefined;
+ return this.plugs.find((p) => p instanceof plug) as InstanceType | undefined
}
/** Open the editor plug panel */
diff --git a/ui/artalk/src/plugins/editor/_kit.ts b/ui/artalk/src/plugins/editor/_kit.ts
index 365329eed..e2f017184 100644
--- a/ui/artalk/src/plugins/editor/_kit.ts
+++ b/ui/artalk/src/plugins/editor/_kit.ts
@@ -1,14 +1,11 @@
import type { PlugManager } from '../editor-kit'
-import type EditorPlug from "./_plug"
+import type EditorPlug from './_plug'
/**
* PlugKit provides a set of methods to help you develop editor plug
*/
export default class PlugKit {
- constructor(
- private plugs: PlugManager
- ) {
- }
+ constructor(private plugs: PlugManager) {}
/** Use the editor */
useEditor() {
diff --git a/ui/artalk/src/plugins/editor/_plug.ts b/ui/artalk/src/plugins/editor/_plug.ts
index c32439170..b38dac896 100644
--- a/ui/artalk/src/plugins/editor/_plug.ts
+++ b/ui/artalk/src/plugins/editor/_plug.ts
@@ -14,10 +14,7 @@ interface EditorPlug {
}
class EditorPlug {
- constructor(
- protected kit: PlugKit
- ) {
- }
+ constructor(protected kit: PlugKit) {}
/** Use plug btn will add a btn on the bottom of editor */
useBtn(html: string = '') {
diff --git a/ui/artalk/src/plugins/editor/closable.ts b/ui/artalk/src/plugins/editor/closable.ts
index 5ff7ae9e2..24163a651 100644
--- a/ui/artalk/src/plugins/editor/closable.ts
+++ b/ui/artalk/src/plugins/editor/closable.ts
@@ -28,7 +28,11 @@ export default class Closable extends EditorPlug {
private close() {
if (!this.kit.useUI().$textareaWrap.querySelector('.atk-comment-closed'))
- this.kit.useUI().$textareaWrap.prepend(Utils.createElement(`|null = null
+ private loadingTask: Promise | null = null
private $grpWrap!: HTMLElement
private $grpSwitcher!: HTMLElement
@@ -26,7 +26,9 @@ export default class Emoticons extends EditorPlug {
this.kit.useMounted(() => {
this.usePanel(``)
- this.useBtn(``)
+ this.useBtn(
+ ``,
+ )
})
this.kit.useUnmounted(() => {})
@@ -91,24 +93,26 @@ export default class Emoticons extends EditorPlug {
const pushGrp = (grp: EmoticonGrpData) => {
if (typeof grp !== 'object') return
- if (grp.name && data.find(o => o.name === grp.name)) return
+ if (grp.name && data.find((o) => o.name === grp.name)) return
data.push(grp)
}
// 加载子内容
const remoteLoad = async (d: any[]) => {
- await Promise.all(d.map(async (grp, index) => {
- if (typeof grp === 'object' && !Array.isArray(grp)) {
- pushGrp(grp)
- } else if (Array.isArray(grp)) {
- await remoteLoad(grp)
- } else if (typeof grp === "string") {
- const grpData = await this.remoteLoad(grp)
-
- if (Array.isArray(grpData)) await remoteLoad(grpData)
- else if (typeof grpData === 'object') pushGrp(grpData)
- }
- }))
+ await Promise.all(
+ d.map(async (grp, index) => {
+ if (typeof grp === 'object' && !Array.isArray(grp)) {
+ pushGrp(grp)
+ } else if (Array.isArray(grp)) {
+ await remoteLoad(grp)
+ } else if (typeof grp === 'string') {
+ const grpData = await this.remoteLoad(grp)
+
+ if (Array.isArray(grpData)) await remoteLoad(grpData)
+ else if (typeof grpData === 'object') pushGrp(grpData)
+ }
+ }),
+ )
}
await remoteLoad(data)
@@ -116,14 +120,20 @@ export default class Emoticons extends EditorPlug {
data.forEach((item: any) => {
if (this.isOwOFormat(item)) {
const c = this.convertOwO(item)
- c.forEach((grp) => { pushGrp(grp) })
+ c.forEach((grp) => {
+ pushGrp(grp)
+ })
} else if (Array.isArray(item)) {
- item.forEach((grp) => { pushGrp(grp) })
+ item.forEach((grp) => {
+ pushGrp(grp)
+ })
}
})
// 剔除非法数据
- data = data.filter((item: any) => (typeof item === 'object' && !Array.isArray(item) && !!item && !!item.name))
+ data = data.filter(
+ (item: any) => typeof item === 'object' && !Array.isArray(item) && !!item && !!item.name,
+ )
// console.log(data)
@@ -153,17 +163,17 @@ export default class Emoticons extends EditorPlug {
private solveNullKey(data: EmoticonGrpData[]) {
data.forEach((grp) => {
grp.items.forEach((item, index) => {
- if (!item.key) item.key = `${grp.name} ${index+1}`
+ if (!item.key) item.key = `${grp.name} ${index + 1}`
})
})
}
/** 避免相同 item.key */
private solveSameKey(data: EmoticonGrpData[]) {
- const tmp: {[key: string]: number} = {}
+ const tmp: { [key: string]: number } = {}
data.forEach((grp) => {
- grp.items.forEach(item => {
- if (!item.key || String(item.key).trim() === "") return
+ grp.items.forEach((item) => {
+ if (!item.key || String(item.key).trim() === '') return
if (!tmp[item.key]) tmp[item.key] = 1
else tmp[item.key]++
@@ -175,10 +185,15 @@ export default class Emoticons extends EditorPlug {
/** 判断是否为 OwO 格式 */
private isOwOFormat(data: any) {
try {
- return (typeof data === 'object') && !!Object.values(data).length
- && Array.isArray(Object.keys(Object.values(data)[0].container))
- && Object.keys(Object.values(data)[0].container[0]).includes('icon')
- } catch { return false }
+ return (
+ typeof data === 'object' &&
+ !!Object.values(data).length &&
+ Array.isArray(Object.keys(Object.values(data)[0].container)) &&
+ Object.keys(Object.values(data)[0].container[0]).includes('icon')
+ )
+ } catch {
+ return false
+ }
}
/** 转换 OwO 格式数据 */
@@ -193,7 +208,10 @@ export default class Emoticons extends EditorPlug {
const find = /src=["'](.*?)["']/.exec(iconStr)
if (find && find.length > 1) item.icon = find[1]
}
- nGrp.items.push({ key: item.text || `${grpName} ${index+1}`, val: item.icon })
+ nGrp.items.push({
+ key: item.text || `${grpName} ${index + 1}`,
+ val: item.icon,
+ })
})
dest.push(nGrp)
})
@@ -216,7 +234,7 @@ export default class Emoticons extends EditorPlug {
const $item = Utils.createElement(``)
$grp.append($item)
- if (!!item.key && !(new RegExp(`^(${grp.name})?\\s?[0-9]+$`).test(item.key)))
+ if (!!item.key && !new RegExp(`^(${grp.name})?\\s?[0-9]+$`).test(item.key))
$item.setAttribute('title', item.key)
if (grp.type === 'image') {
@@ -246,7 +264,7 @@ export default class Emoticons extends EditorPlug {
const $item = Utils.createElement('')
$item.innerText = grp.name
$item.setAttribute('data-index', String(index))
- $item.onclick = () => (this.openGrp(index))
+ $item.onclick = () => this.openGrp(index)
this.$grpSwitcher.append($item)
})
}
@@ -266,7 +284,9 @@ export default class Emoticons extends EditorPlug {
}
})
- this.$grpSwitcher?.querySelectorAll('span.active').forEach(item => item.classList.remove('active'))
+ this.$grpSwitcher
+ ?.querySelectorAll('span.active')
+ .forEach((item) => item.classList.remove('active'))
this.$grpSwitcher?.querySelector(`span[data-index="${index}"]`)?.classList.add('active')
this.changeListHeight()
@@ -279,13 +299,14 @@ export default class Emoticons extends EditorPlug {
/** 处理评论 content 中的表情内容 */
public transEmoticonImageText(text: string) {
- if (!this.emoticons || !Array.isArray(this.emoticons))
- return text
+ if (!this.emoticons || !Array.isArray(this.emoticons)) return text
this.emoticons.forEach((grp) => {
if (grp.type !== 'image') return
Object.entries(grp.items).forEach(([index, item]) => {
- text = text.split(`:[${item.key}]`).join(`
`) // replaceAll(...)
+ text = text
+ .split(`:[${item.key}]`)
+ .join(``) // replaceAll(...)
})
})
diff --git a/ui/artalk/src/plugins/editor/header-event.ts b/ui/artalk/src/plugins/editor/header-event.ts
index ca4d7e78c..8a5125387 100644
--- a/ui/artalk/src/plugins/editor/header-event.ts
+++ b/ui/artalk/src/plugins/editor/header-event.ts
@@ -9,18 +9,25 @@ export default class HeaderEvent extends EditorPlug {
constructor(kit: PlugKit) {
super(kit)
- const inputEventFns: {[name: string]: () => void} = {}
- const changeEventFns: {[name: string]: () => void} = {}
+ const inputEventFns: { [name: string]: () => void } = {}
+ const changeEventFns: { [name: string]: () => void } = {}
- const trigger = (evt: 'header-input'|'header-change', $input: HTMLInputElement, field: string) => () => {
- this.kit.useEvents().trigger(evt, { field, $input })
- }
+ const trigger =
+ (evt: 'header-input' | 'header-change', $input: HTMLInputElement, field: string) => () => {
+ this.kit.useEvents().trigger(evt, { field, $input })
+ }
this.kit.useMounted(() => {
// batch bind the events
Object.entries(this.$inputs).forEach(([key, $input]) => {
- $input.addEventListener('input', inputEventFns[key] = trigger('header-input', $input, key))
- $input.addEventListener('change', changeEventFns[key] = trigger('header-change', $input, key))
+ $input.addEventListener(
+ 'input',
+ (inputEventFns[key] = trigger('header-input', $input, key)),
+ )
+ $input.addEventListener(
+ 'change',
+ (changeEventFns[key] = trigger('header-change', $input, key)),
+ )
})
})
diff --git a/ui/artalk/src/plugins/editor/header-user.ts b/ui/artalk/src/plugins/editor/header-user.ts
index 9d2639b5b..ae7e0db05 100644
--- a/ui/artalk/src/plugins/editor/header-user.ts
+++ b/ui/artalk/src/plugins/editor/header-user.ts
@@ -7,27 +7,24 @@ export default class HeaderUser extends EditorPlug {
constructor(kit: PlugKit) {
super(kit)
- const onInput = ({ $input, field }: { $input: HTMLInputElement, field: string }) => {
- if (this.kit.useEditor().getState() === 'edit')
- return // TODO: prevent execute when editing, since update comment.user not support
+ const onInput = ({ $input, field }: { $input: HTMLInputElement; field: string }) => {
+ if (this.kit.useEditor().getState() === 'edit') return // TODO: prevent execute when editing, since update comment.user not support
// update user data
this.kit.useUser().update({ [field]: $input.value.trim() })
// remote fetch user info
- if (field === 'nick' || field === 'email')
- this.fetchUserInfo() // must after update user data, since fetchUserInfo() will use User.data
+ if (field === 'nick' || field === 'email') this.fetchUserInfo() // must after update user data, since fetchUserInfo() will use User.data
}
this.kit.useMounted(() => {
- Object.entries(this.kit.useEditor().getHeaderInputEls())
- .forEach(([key, $input]) => {
- // set placeholder
- $input.placeholder = `${$t(key as any)}`
+ Object.entries(this.kit.useEditor().getHeaderInputEls()).forEach(([key, $input]) => {
+ // set placeholder
+ $input.placeholder = `${$t(key as any)}`
- // sync header values from User.data
- $input.value = this.kit.useUser().getData()[key] || ''
- })
+ // sync header values from User.data
+ $input.value = this.kit.useUser().getData()[key] || ''
+ })
// bind events
this.kit.useEvents().on('header-input', onInput)
@@ -39,8 +36,8 @@ export default class HeaderUser extends EditorPlug {
}
private query = {
- timer: null,
- abortFn: <(() => void)|null>null
+ timer: null,
+ abortFn: <(() => void) | null>null,
}
/**
@@ -59,9 +56,14 @@ export default class HeaderUser extends EditorPlug {
const CANCEL_TOKEN = 'getUserCancelToken'
this.query.abortFn = () => api.abortRequest(CANCEL_TOKEN)
- api.user.getUser({ ...api.getUserFields() }, {
- cancelToken: CANCEL_TOKEN
- }).then(res => this.onUserInfoFetched(res.data))
+ api.user
+ .getUser(
+ { ...api.getUserFields() },
+ {
+ cancelToken: CANCEL_TOKEN,
+ },
+ )
+ .then((res) => this.onUserInfoFetched(res.data))
.catch((err) => {})
.finally(() => {
this.query.abortFn = null // clear the abort function (clarify the request is finished)
@@ -74,9 +76,7 @@ export default class HeaderUser extends EditorPlug {
*
* @param data The response data from server
*/
- private onUserInfoFetched(
- data: UserInfoApiResponseData
- ) {
+ private onUserInfoFetched(data: UserInfoApiResponseData) {
// If api response is not login, logout
if (!data.is_login) this.kit.useUser().logout()
@@ -87,7 +87,7 @@ export default class HeaderUser extends EditorPlug {
if (this.kit.useUser().checkHasBasicUserInfo() && !data.is_login && data.user?.is_admin) {
// then show login window
this.kit.useGlobalCtx().checkAdmin({
- onSuccess: () => {}
+ onSuccess: () => {},
})
}
diff --git a/ui/artalk/src/plugins/editor/index.ts b/ui/artalk/src/plugins/editor/index.ts
index 3db326938..e1c5c36b5 100644
--- a/ui/artalk/src/plugins/editor/index.ts
+++ b/ui/artalk/src/plugins/editor/index.ts
@@ -19,20 +19,29 @@ import Preview from './preview'
const EDITOR_PLUGS: (typeof EditorPlug)[] = [
// Core
LocalStorage,
- HeaderEvent, HeaderUser, HeaderLink,
+ HeaderEvent,
+ HeaderUser,
+ HeaderLink,
Textarea,
- Submit, SubmitBtn,
- Mover, StateReply, StateEdit,
+ Submit,
+ SubmitBtn,
+ Mover,
+ StateReply,
+ StateEdit,
Closable,
// Extensions
- Emoticons, Upload, Preview
+ Emoticons,
+ Upload,
+ Preview,
]
/**
* Get the enabled plugs by config
*/
-export function getEnabledPlugs(conf: Pick): (typeof EditorPlug)[] {
+export function getEnabledPlugs(
+ conf: Pick,
+): (typeof EditorPlug)[] {
// The reference map of config and plugs
// (for check if the plug is enabled)
const confRefs = new Map()
@@ -41,5 +50,5 @@ export function getEnabledPlugs(conf: Pick !confRefs.has(p) || !!confRefs.get(p))
+ return EDITOR_PLUGS.filter((p) => !confRefs.has(p) || !!confRefs.get(p))
}
diff --git a/ui/artalk/src/plugins/editor/mover.ts b/ui/artalk/src/plugins/editor/mover.ts
index 8f4f9be6c..da085ea1e 100644
--- a/ui/artalk/src/plugins/editor/mover.ts
+++ b/ui/artalk/src/plugins/editor/mover.ts
@@ -23,7 +23,10 @@ export default class Mover extends EditorPlug {
back() {
if (!this.isMoved) return
this.isMoved = false
- this.kit.useGlobalCtx().$root.querySelector('.atk-editor-travel-placeholder')?.replaceWith(this.kit.useUI().$el)
+ this.kit
+ .useGlobalCtx()
+ .$root.querySelector('.atk-editor-travel-placeholder')
+ ?.replaceWith(this.kit.useUI().$el)
this.kit.useUI().$el.classList.remove('editor-traveling')
}
}
diff --git a/ui/artalk/src/plugins/editor/preview.ts b/ui/artalk/src/plugins/editor/preview.ts
index 2d58aa190..39b2ee7cf 100644
--- a/ui/artalk/src/plugins/editor/preview.ts
+++ b/ui/artalk/src/plugins/editor/preview.ts
@@ -15,7 +15,9 @@ export default class Preview extends EditorPlug {
this.usePanel(``)
// initialize plug button
- this.useBtn(``)
+ this.useBtn(
+ ``,
+ )
})
this.kit.useUnmounted(() => {})
diff --git a/ui/artalk/src/plugins/editor/state-edit.ts b/ui/artalk/src/plugins/editor/state-edit.ts
index 7afd0f5cf..2b561b12b 100644
--- a/ui/artalk/src/plugins/editor/state-edit.ts
+++ b/ui/artalk/src/plugins/editor/state-edit.ts
@@ -23,7 +23,7 @@ export default class StateEdit extends EditorPlug {
// register submit preset
this.kit.useMounted(() => {
const submitPlug = this.kit.useDeps(Submit)
- if (!submitPlug) throw Error("SubmitPlug not initialized")
+ if (!submitPlug) throw Error('SubmitPlug not initialized')
submitPlug.registerCustom({
activeCond: () => !!this.comment, // active this custom submit when edit mode
@@ -36,13 +36,14 @@ export default class StateEdit extends EditorPlug {
}
const comment = this.comment!
const nComment = await this.kit.useApi().comments.updateComment(comment.id, {
- ...comment, ...saveData
+ ...comment,
+ ...saveData,
})
return nComment.data
},
post: (nComment: CommentData) => {
this.kit.useGlobalCtx().getData().updateComment(nComment)
- }
+ },
})
})
}
@@ -56,7 +57,7 @@ export default class StateEdit extends EditorPlug {
`${$t('editCancel')}` +
` ` +
`` +
- ``
+ ``,
)
$btn.onclick = () => {
this.kit.useEditor().resetState()
diff --git a/ui/artalk/src/plugins/editor/state-reply.ts b/ui/artalk/src/plugins/editor/state-reply.ts
index 40eaa4b17..492a0c3c5 100644
--- a/ui/artalk/src/plugins/editor/state-reply.ts
+++ b/ui/artalk/src/plugins/editor/state-reply.ts
@@ -25,7 +25,7 @@ export default class StateReply extends EditorPlug {
// register submit preset
this.kit.useEvents().on('mounted', () => {
const submitPlug = this.kit.useDeps(Submit)
- if (!submitPlug) throw Error("SubmitPlug not initialized")
+ if (!submitPlug) throw Error('SubmitPlug not initialized')
const defaultPreset = new SubmitAddPreset(this.kit)
@@ -34,13 +34,15 @@ export default class StateReply extends EditorPlug {
req: async () => {
if (!this.comment) throw new Error('reply comment cannot be empty')
- const nComment = (await this.kit.useApi().comments.createComment({
- ...(await defaultPreset.getSubmitAddParams()),
- rid: this.comment.id,
- page_key: this.comment.page_key,
- page_title: undefined,
- site_name: this.comment.site_name
- })).data
+ const nComment = (
+ await this.kit.useApi().comments.createComment({
+ ...(await defaultPreset.getSubmitAddParams()),
+ rid: this.comment.id,
+ page_key: this.comment.page_key,
+ page_title: undefined,
+ site_name: this.comment.site_name,
+ })
+ ).data
return nComment
},
@@ -52,7 +54,7 @@ export default class StateReply extends EditorPlug {
}
defaultPreset.postSubmitAdd(nComment)
- }
+ },
})
})
}
@@ -66,7 +68,7 @@ export default class StateReply extends EditorPlug {
`${$t('reply')} ` +
`` +
`` +
- ``
+ ``,
)
$btn.querySelector('.atk-text')!.innerText = `@${commentData.nick}`
$btn.addEventListener('click', () => {
diff --git a/ui/artalk/src/plugins/editor/submit-add.ts b/ui/artalk/src/plugins/editor/submit-add.ts
index 590867753..79838569b 100644
--- a/ui/artalk/src/plugins/editor/submit-add.ts
+++ b/ui/artalk/src/plugins/editor/submit-add.ts
@@ -6,9 +6,11 @@ export default class SubmitAddPreset {
constructor(private kit: PlugKit) {}
async reqAdd() {
- const nComment = (await this.kit.useApi().comments.createComment({
- ...(await this.getSubmitAddParams())
- })).data
+ const nComment = (
+ await this.kit.useApi().comments.createComment({
+ ...(await this.getSubmitAddParams()),
+ })
+ ).data
return nComment
}
@@ -18,7 +20,9 @@ export default class SubmitAddPreset {
return {
content: this.kit.useEditor().getContentFinal(),
- name: nick, email, link,
+ name: nick,
+ email,
+ link,
rid: 0,
page_key: conf.pageKey,
page_title: conf.pageTitle,
diff --git a/ui/artalk/src/plugins/editor/submit.ts b/ui/artalk/src/plugins/editor/submit.ts
index bc1b8e9ba..a4e1758f3 100644
--- a/ui/artalk/src/plugins/editor/submit.ts
+++ b/ui/artalk/src/plugins/editor/submit.ts
@@ -42,7 +42,7 @@ export default class Submit extends EditorPlug {
return
}
- const custom = this.customs.find(o => o.activeCond())
+ const custom = this.customs.find((o) => o.activeCond())
this.kit.useEditor().showLoading()
diff --git a/ui/artalk/src/plugins/editor/upload.ts b/ui/artalk/src/plugins/editor/upload.ts
index 995bf8894..d4b4fa58e 100644
--- a/ui/artalk/src/plugins/editor/upload.ts
+++ b/ui/artalk/src/plugins/editor/upload.ts
@@ -21,16 +21,19 @@ export default class Upload extends EditorPlug {
this.$imgUploadInput = document.createElement('input')
this.$imgUploadInput.type = 'file'
this.$imgUploadInput.style.display = 'none'
- this.$imgUploadInput.accept = AllowImgExts.map(o => `.${o}`).join(',')
+ this.$imgUploadInput.accept = AllowImgExts.map((o) => `.${o}`).join(',')
// TODO: Use btn cannot refresh when mounted event is triggered
- const $btn = this.useBtn(``)
+ const $btn = this.useBtn(
+ ``,
+ )
$btn.after(this.$imgUploadInput)
$btn.onclick = () => {
// 选择图片
const $input = this.$imgUploadInput!
$input.onchange = () => {
- (async () => { // 解决阻塞 UI 问题
+ ;(async () => {
+ // 解决阻塞 UI 问题
if (!$input.files || $input.files.length === 0) return
const file = $input.files[0]
this.uploadImg(file)
@@ -129,16 +132,25 @@ export default class Upload extends EditorPlug {
let imgURL = resp.public_url as string
// 若为相对路径，加上 artalk server
- if (!Utils.isValidURL(imgURL)) imgURL = Utils.getURLBasedOnApi({
- base: this.kit.useConf().server,
- path: imgURL,
- })
+ if (!Utils.isValidURL(imgURL))
+ imgURL = Utils.getURLBasedOnApi({
+ base: this.kit.useConf().server,
+ path: imgURL,
+ })
// 上传成功插入图片
- this.kit.useEditor().setContent(this.kit.useUI().$textarea.value.replace(uploadPlaceholderTxt, `${insertPrefix}`))
+ this.kit
+ .useEditor()
+ .setContent(
+ this.kit
+ .useUI()
+ .$textarea.value.replace(uploadPlaceholderTxt, `${insertPrefix}`),
+ )
} else {
// 上传失败删除加载文字
- this.kit.useEditor().setContent(this.kit.useUI().$textarea.value.replace(uploadPlaceholderTxt, ''))
+ this.kit
+ .useEditor()
+ .setContent(this.kit.useUI().$textarea.value.replace(uploadPlaceholderTxt, ''))
}
}
}
diff --git a/ui/artalk/src/plugins/index.ts b/ui/artalk/src/plugins/index.ts
index bd3d818c2..debbb2e65 100644
--- a/ui/artalk/src/plugins/index.ts
+++ b/ui/artalk/src/plugins/index.ts
@@ -9,8 +9,12 @@ import { AdminOnlyElem } from './admin-only-elem'
import { DarkMode } from './dark-mode'
export const DefaultPlugins: ArtalkPlugin[] = [
- Markdown, EditorKit, AdminOnlyElem,
+ Markdown,
+ EditorKit,
+ AdminOnlyElem,
...ListPlugins,
Notifies,
- PvCountWidget, VersionCheck, DarkMode,
+ PvCountWidget,
+ VersionCheck,
+ DarkMode,
]
diff --git a/ui/artalk/src/plugins/list/copyright.ts b/ui/artalk/src/plugins/list/copyright.ts
index 2206e4811..a98af8697 100644
--- a/ui/artalk/src/plugins/list/copyright.ts
+++ b/ui/artalk/src/plugins/list/copyright.ts
@@ -8,9 +8,9 @@ export const Copyright: ArtalkPlugin = (ctx) => {
const $copyright = list.$el.querySelector('.atk-copyright')
if (!$copyright) return
- $copyright.innerHTML = (
+ $copyright.innerHTML =
`Powered By ` +
- `Artalk`)
+ `Artalk`
})
}
diff --git a/ui/artalk/src/plugins/list/count.ts b/ui/artalk/src/plugins/list/count.ts
index 489965071..cf7ed0453 100644
--- a/ui/artalk/src/plugins/list/count.ts
+++ b/ui/artalk/src/plugins/list/count.ts
@@ -9,7 +9,11 @@ export const Count: ArtalkPlugin = (ctx) => {
const $count = list.$el.querySelector('.atk-comment-count .atk-text')
if (!$count) return
- const text = Utils.htmlEncode($t('counter', { count: `${Number(ctx.getData().getListLastFetch()?.data?.count) || 0}` }))
+ const text = Utils.htmlEncode(
+ $t('counter', {
+ count: `${Number(ctx.getData().getListLastFetch()?.data?.count) || 0}`,
+ }),
+ )
$count.innerHTML = text.replace(/(\d+)/, '$1')
}
diff --git a/ui/artalk/src/plugins/list/dropdown.ts b/ui/artalk/src/plugins/list/dropdown.ts
index 0dbb6fba3..b73ecc698 100644
--- a/ui/artalk/src/plugins/list/dropdown.ts
+++ b/ui/artalk/src/plugins/list/dropdown.ts
@@ -12,11 +12,39 @@ export const Dropdown: ArtalkPlugin = (ctx) => {
renderDropdown({
$dropdownWrap: $dropdownOn,
dropdownList: [
- [$t('sortLatest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'date_desc' }) }],
- [$t('sortBest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'vote' }) }],
- [$t('sortOldest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'date_asc' }) }],
- [$t('sortAuthor'), () => { reloadUseParamsEditor(p => { p.view_only_admin = true }) }],
- ]
+ [
+ $t('sortLatest'),
+ () => {
+ reloadUseParamsEditor((p) => {
+ p.sort_by = 'date_desc'
+ })
+ },
+ ],
+ [
+ $t('sortBest'),
+ () => {
+ reloadUseParamsEditor((p) => {
+ p.sort_by = 'vote'
+ })
+ },
+ ],
+ [
+ $t('sortOldest'),
+ () => {
+ reloadUseParamsEditor((p) => {
+ p.sort_by = 'date_asc'
+ })
+ },
+ ],
+ [
+ $t('sortAuthor'),
+ () => {
+ reloadUseParamsEditor((p) => {
+ p.view_only_admin = true
+ })
+ },
+ ],
+ ],
})
}
@@ -31,7 +59,7 @@ export const Dropdown: ArtalkPlugin = (ctx) => {
initDropdown($count)
} else {
removeDropdown({
- $dropdownWrap: $count
+ $dropdownWrap: $count,
})
}
})
@@ -39,7 +67,7 @@ export const Dropdown: ArtalkPlugin = (ctx) => {
/** 评论排序方式选择下拉菜单 */
function renderDropdown(conf: {
- $dropdownWrap: HTMLElement,
+ $dropdownWrap: HTMLElement
dropdownList: [string, () => void][]
}) {
const { $dropdownWrap, dropdownList } = conf
@@ -58,12 +86,16 @@ function renderDropdown(conf: {
// set active
curtActive = i
- $dropdown.querySelectorAll('.active').forEach((e) => { e.classList.remove('active') })
+ $dropdown.querySelectorAll('.active').forEach((e) => {
+ e.classList.remove('active')
+ })
$item.classList.add('active')
// 关闭层 (临时消失，取消 :hover)
$dropdown.style.display = 'none'
- setTimeout(() => { $dropdown.style.display = '' }, 80)
+ setTimeout(() => {
+ $dropdown.style.display = ''
+ }, 80)
}
// 生成列表元素
@@ -75,7 +107,9 @@ function renderDropdown(conf: {
const $item = Utils.createElement(`('span')!
$link.innerText = name
- $link.onclick = () => { onItemClick(i, $item, name, action) }
+ $link.onclick = () => {
+ onItemClick(i, $item, name, action)
+ }
$dropdown.append($item)
if (i === curtActive) $item.classList.add('active') // 默认选中项
@@ -85,9 +119,7 @@ function renderDropdown(conf: {
}
/** 删除评论排序方式选择下拉菜单 */
-function removeDropdown(conf: {
- $dropdownWrap: HTMLElement
-}) {
+function removeDropdown(conf: { $dropdownWrap: HTMLElement }) {
const { $dropdownWrap } = conf
$dropdownWrap.classList.remove('atk-dropdown-wrap')
$dropdownWrap.querySelector('.atk-arrow-down-icon')?.remove()
diff --git a/ui/artalk/src/plugins/list/error-dialog.ts b/ui/artalk/src/plugins/list/error-dialog.ts
index cbc5ca773..c4cc01a12 100644
--- a/ui/artalk/src/plugins/list/error-dialog.ts
+++ b/ui/artalk/src/plugins/list/error-dialog.ts
@@ -15,8 +15,7 @@ export const ErrorDialog: ArtalkPlugin = (ctx) => {
$err: ctx.get('list').$el,
errMsg: err.msg,
errData: err.data,
- retryFn: () => ctx.fetch({ offset: 0 })
+ retryFn: () => ctx.fetch({ offset: 0 }),
})
})
}
-
diff --git a/ui/artalk/src/plugins/list/fetch.ts b/ui/artalk/src/plugins/list/fetch.ts
index b3115ddfe..f81701c22 100644
--- a/ui/artalk/src/plugins/list/fetch.ts
+++ b/ui/artalk/src/plugins/list/fetch.ts
@@ -11,12 +11,12 @@ export const Fetch: ArtalkPlugin = (ctx) => {
limit: ctx.conf.pagination.pageSize,
flatMode: ctx.conf.flatMode as boolean, // always be boolean because had been handled in Artalk.init
paramsModifier: ctx.conf.listFetchParamsModifier,
- ..._params
+ ..._params,
}
// must before other function call
ctx.getData().setListLastFetch({
- params
+ params,
})
// prepare params for request
@@ -32,10 +32,11 @@ export const Fetch: ArtalkPlugin = (ctx) => {
if (params.paramsModifier) params.paramsModifier(reqParams)
// start request
- ctx.getApi().comments
- .getComments({
+ ctx
+ .getApi()
+ .comments.getComments({
...reqParams,
- ...ctx.getApi().getUserFields()
+ ...ctx.getApi().getUserFields(),
})
.then(({ data }) => {
// Must before all other function call and event trigger,
@@ -59,7 +60,7 @@ export const Fetch: ArtalkPlugin = (ctx) => {
// 显示错误对话框
const error = {
msg: e.msg || String(e),
- data: e.data
+ data: e.data,
}
params.onError && params.onError(error)
diff --git a/ui/artalk/src/plugins/list/goto-dispatcher.ts b/ui/artalk/src/plugins/list/goto-dispatcher.ts
index f58fddf59..32308317e 100644
--- a/ui/artalk/src/plugins/list/goto-dispatcher.ts
+++ b/ui/artalk/src/plugins/list/goto-dispatcher.ts
@@ -7,8 +7,8 @@ export const GotoDispatcher: ArtalkPlugin = (ctx) => {
const commentID = extractCommentID()
if (!commentID) return
- if (locker && lastID === commentID) return // if the commentID is the same as the last one, do nothing
- lastID = commentID // record the last commentID
+ if (locker && lastID === commentID) return // if the commentID is the same as the last one, do nothing
+ lastID = commentID // record the last commentID
ctx.trigger('list-goto', commentID) // trigger event
}
@@ -25,12 +25,13 @@ export const GotoDispatcher: ArtalkPlugin = (ctx) => {
})
}
-function extractCommentID(): number|null {
+function extractCommentID(): number | null {
// Try get from hash
// Hash retrieval priority is higher than query,
// Because click goto will change hash.
const match = window.location.hash.match(/#atk-comment-([0-9]+)/)
- let commentId = match && match[1] && !Number.isNaN(parseFloat(match[1])) ? parseFloat(match[1]) : null
+ let commentId =
+ match && match[1] && !Number.isNaN(parseFloat(match[1])) ? parseFloat(match[1]) : null
// Fail over to get from query
if (!commentId) {
diff --git a/ui/artalk/src/plugins/list/goto-focus.ts b/ui/artalk/src/plugins/list/goto-focus.ts
index 066850a7c..31ecf8507 100644
--- a/ui/artalk/src/plugins/list/goto-focus.ts
+++ b/ui/artalk/src/plugins/list/goto-focus.ts
@@ -3,15 +3,17 @@ import type { ArtalkPlugin } from '@/types'
export const GotoFocus: ArtalkPlugin = (ctx) => {
ctx.on('list-goto', async (commentID) => {
// find the comment node
- let comment = ctx.getCommentNodes().find(c => c.getID() === commentID)
+ let comment = ctx.getCommentNodes().find((c) => c.getID() === commentID)
if (!comment) {
// fetch and insert the comment from the server
const data = (await ctx.getApi().comments.getComment(commentID)).data
- ctx.get('list').getListLayout({ forceFlatMode: true }).insert(data.comment, data.reply_comment)
- comment = ctx.getCommentNodes().find(c => c.getID() === commentID)
+ ctx
+ .get('list')
+ .getListLayout({ forceFlatMode: true })
+ .insert(data.comment, data.reply_comment)
+ comment = ctx.getCommentNodes().find((c) => c.getID() === commentID)
}
if (!comment) return
comment.focus()
})
}
-
diff --git a/ui/artalk/src/plugins/list/index.ts b/ui/artalk/src/plugins/list/index.ts
index ceefd2f1f..4dc5725c4 100644
--- a/ui/artalk/src/plugins/list/index.ts
+++ b/ui/artalk/src/plugins/list/index.ts
@@ -17,10 +17,22 @@ import { ReachBottom } from './reach-bottom'
import { GotoFirst } from './goto-first'
const ListPlugins: ArtalkPlugin[] = [
- Fetch, Loading, Unread,
- WithEditor, Count, SidebarBtn, UnreadBadge,
- Dropdown, GotoDispatcher, GotoFocus, NoComment, Copyright,
- TimeTicking, ErrorDialog, ReachBottom, GotoFirst
+ Fetch,
+ Loading,
+ Unread,
+ WithEditor,
+ Count,
+ SidebarBtn,
+ UnreadBadge,
+ Dropdown,
+ GotoDispatcher,
+ GotoFocus,
+ NoComment,
+ Copyright,
+ TimeTicking,
+ ErrorDialog,
+ ReachBottom,
+ GotoFirst,
]
export { ListPlugins }
diff --git a/ui/artalk/src/plugins/list/loading.ts b/ui/artalk/src/plugins/list/loading.ts
index 3774095de..311114f46 100644
--- a/ui/artalk/src/plugins/list/loading.ts
+++ b/ui/artalk/src/plugins/list/loading.ts
@@ -5,7 +5,8 @@ export const Loading: ArtalkPlugin = (ctx) => {
ctx.on('list-fetch', (p) => {
const list = ctx.get('list')
- if (p.offset === 0) // only show loading when fetch first page
+ if (p.offset === 0)
+ // only show loading when fetch first page
Ui.setLoading(true, list.$el)
// else if not first page, show loading in paginator (code not there)
})
diff --git a/ui/artalk/src/plugins/list/reach-bottom.ts b/ui/artalk/src/plugins/list/reach-bottom.ts
index 47abfe3c7..cfa5a2b31 100644
--- a/ui/artalk/src/plugins/list/reach-bottom.ts
+++ b/ui/artalk/src/plugins/list/reach-bottom.ts
@@ -1,27 +1,30 @@
import type { ArtalkPlugin } from '@/types'
export const ReachBottom: ArtalkPlugin = (ctx) => {
- let observer: IntersectionObserver|null = null
+ let observer: IntersectionObserver | null = null
const setupObserver = ($target: HTMLElement) => {
const scrollEvtAt = (ctx.conf.scrollRelativeTo && ctx.conf.scrollRelativeTo()) || null
// eslint-disable-next-line compat/compat
- observer = new IntersectionObserver(([entries]) => {
- if (entries.isIntersecting) {
- clearObserver() // clear before trigger event to avoid trigger twice `list-reach-bottom`
-
- // note that this event will be triggered only once
- // until the next list is loaded
- ctx.trigger('list-reach-bottom')
- }
- }, {
- threshold: 0.9, // when the target is 90% visible
-
- // @see https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root
- // If the root is null, then the bounds of the actual document viewport are used.
- root: scrollEvtAt
- })
+ observer = new IntersectionObserver(
+ ([entries]) => {
+ if (entries.isIntersecting) {
+ clearObserver() // clear before trigger event to avoid trigger twice `list-reach-bottom`
+
+ // note that this event will be triggered only once
+ // until the next list is loaded
+ ctx.trigger('list-reach-bottom')
+ }
+ },
+ {
+ threshold: 0.9, // when the target is 90% visible
+
+ // @see https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root
+ // If the root is null, then the bounds of the actual document viewport are used.
+ root: scrollEvtAt,
+ },
+ )
observer.observe($target)
}
@@ -37,7 +40,7 @@ export const ReachBottom: ArtalkPlugin = (ctx) => {
// get the second last child
const children = list.getCommentsWrapEl().childNodes
- const $target = children.length > 2 ? children[children.length - 2] as HTMLElement : null
+ const $target = children.length > 2 ? (children[children.length - 2] as HTMLElement) : null
if (!$target) return
// check IntersectionObserver support
diff --git a/ui/artalk/src/plugins/list/sidebar-btn.ts b/ui/artalk/src/plugins/list/sidebar-btn.ts
index dbe8de390..139ab75f8 100644
--- a/ui/artalk/src/plugins/list/sidebar-btn.ts
+++ b/ui/artalk/src/plugins/list/sidebar-btn.ts
@@ -2,7 +2,7 @@ import type { ArtalkPlugin } from '@/types'
import $t from '@/i18n'
export const SidebarBtn: ArtalkPlugin = (ctx) => {
- let $openSidebarBtn: HTMLElement|null = null
+ let $openSidebarBtn: HTMLElement | null = null
const syncByUser = () => {
if (!$openSidebarBtn) return
@@ -14,7 +14,7 @@ export const SidebarBtn: ArtalkPlugin = (ctx) => {
// update button text (normal user or admin)
const $btnText = $openSidebarBtn.querySelector('.atk-text')
- if ($btnText) $btnText.innerText = (!user.isAdmin) ? $t('msgCenter') : $t('ctrlCenter')
+ if ($btnText) $btnText.innerText = !user.isAdmin ? $t('msgCenter') : $t('ctrlCenter')
} else {
$openSidebarBtn.classList.add('atk-hide')
}
@@ -26,7 +26,8 @@ export const SidebarBtn: ArtalkPlugin = (ctx) => {
$openSidebarBtn = list.$el.querySelector('[data-action="open-sidebar"]')
if (!$openSidebarBtn) return
- $openSidebarBtn.onclick = () => { // use onclick rather than addEventListener to prevent duplicate event
+ $openSidebarBtn.onclick = () => {
+ // use onclick rather than addEventListener to prevent duplicate event
ctx.showSidebar()
}
diff --git a/ui/artalk/src/plugins/list/time-ticking.ts b/ui/artalk/src/plugins/list/time-ticking.ts
index b3aa55ebe..5b7a9c729 100644
--- a/ui/artalk/src/plugins/list/time-ticking.ts
+++ b/ui/artalk/src/plugins/list/time-ticking.ts
@@ -3,13 +3,13 @@ import * as Utils from '@/lib/utils'
/** 评论时间自动更新 */
export const TimeTicking: ArtalkPlugin = (ctx) => {
- let timer: number|null = null
+ let timer: number | null = null
ctx.on('mounted', () => {
timer = window.setInterval(() => {
const list = ctx.get('list')
- list.$el.querySelectorAll('[data-atk-comment-date]').forEach(el => {
+ list.$el.querySelectorAll('[data-atk-comment-date]').forEach((el) => {
const date = el.getAttribute('data-atk-comment-date')
el.innerText = Utils.timeAgo(new Date(Number(date)), ctx.$t)
})
diff --git a/ui/artalk/src/plugins/list/unread-badge.ts b/ui/artalk/src/plugins/list/unread-badge.ts
index 0ea21b439..b79edf786 100644
--- a/ui/artalk/src/plugins/list/unread-badge.ts
+++ b/ui/artalk/src/plugins/list/unread-badge.ts
@@ -1,7 +1,7 @@
import type { ArtalkPlugin } from '@/types'
export const UnreadBadge: ArtalkPlugin = (ctx) => {
- let $unreadBadge: HTMLElement|null = null
+ let $unreadBadge: HTMLElement | null = null
const showUnreadBadge = (count: number) => {
if (!$unreadBadge) return
diff --git a/ui/artalk/src/plugins/list/unread.ts b/ui/artalk/src/plugins/list/unread.ts
index 301a26a8e..5eb59692f 100644
--- a/ui/artalk/src/plugins/list/unread.ts
+++ b/ui/artalk/src/plugins/list/unread.ts
@@ -6,7 +6,7 @@ export const Unread: ArtalkPlugin = (ctx) => {
// comment unread highlight
if (ctx.conf.listUnreadHighlight === true) {
const notifies = ctx.getData().getNotifies()
- const notify = notifies.find(o => o.comment_id === comment.getID())
+ const notify = notifies.find((o) => o.comment_id === comment.getID())
if (notify) {
// if comment contains in unread list
@@ -15,7 +15,7 @@ export const Unread: ArtalkPlugin = (ctx) => {
window.open(notify.read_link)
// remove notify which has been read
- ctx.getData().updateNotifies(notifies.filter(o => o.comment_id !== comment.getID()))
+ ctx.getData().updateNotifies(notifies.filter((o) => o.comment_id !== comment.getID()))
})
} else {
// comment not in unread list
@@ -28,10 +28,17 @@ export const Unread: ArtalkPlugin = (ctx) => {
const notifyKey = Utils.getQueryParam('atk_notify_key')
if (notifyKey) {
// mark as read
- ctx.getApi().notifies.markNotifyRead(commentID, notifyKey)
+ ctx
+ .getApi()
+ .notifies.markNotifyRead(commentID, notifyKey)
.then(() => {
// remove from unread list
- ctx.getData().updateNotifies(ctx.getData().getNotifies().filter(o => o.comment_id !== commentID))
+ ctx.getData().updateNotifies(
+ ctx
+ .getData()
+ .getNotifies()
+ .filter((o) => o.comment_id !== commentID),
+ )
})
}
})
diff --git a/ui/artalk/src/plugins/list/with-editor.ts b/ui/artalk/src/plugins/list/with-editor.ts
index 063b9590a..bd2bb6030 100644
--- a/ui/artalk/src/plugins/list/with-editor.ts
+++ b/ui/artalk/src/plugins/list/with-editor.ts
@@ -2,7 +2,7 @@ import type { ContextApi, ArtalkPlugin, PageData } from '@/types'
import $t from '@/i18n'
export const WithEditor: ArtalkPlugin = (ctx) => {
- let $closeCommentBtn: HTMLElement|undefined
+ let $closeCommentBtn: HTMLElement | undefined
// on Artalk mounted
// (after all components had mounted)
@@ -46,11 +46,13 @@ export const WithEditor: ArtalkPlugin = (ctx) => {
/** 管理员设置页面信息 */
function adminPageEditSave(ctx: ContextApi, page: PageData) {
ctx.editorShowLoading()
- ctx.getApi().pages.updatePage(page.id, page)
+ ctx
+ .getApi()
+ .pages.updatePage(page.id, page)
.then(({ data }) => {
ctx.getData().updatePage(data)
})
- .catch(err => {
+ .catch((err) => {
ctx.editorShowNotify(`${$t('editFail')}: ${err.message || String(err)}`, 'e')
})
.finally(() => {
diff --git a/ui/artalk/src/plugins/notifies.ts b/ui/artalk/src/plugins/notifies.ts
index 2ca3675af..a02c57dcc 100644
--- a/ui/artalk/src/plugins/notifies.ts
+++ b/ui/artalk/src/plugins/notifies.ts
@@ -8,8 +8,11 @@ export const Notifies: ArtalkPlugin = (ctx) => {
if (!user) return
// Fetch all unread notifies
- ctx.getApi().notifies.getNotifies(user).then(res => {
- ctx.getData().updateNotifies(res.data.notifies)
- })
+ ctx
+ .getApi()
+ .notifies.getNotifies(user)
+ .then((res) => {
+ ctx.getData().updateNotifies(res.data.notifies)
+ })
})
}
diff --git a/ui/artalk/src/plugins/stat.ts b/ui/artalk/src/plugins/stat.ts
index 6225f8063..6fa2824e5 100644
--- a/ui/artalk/src/plugins/stat.ts
+++ b/ui/artalk/src/plugins/stat.ts
@@ -15,9 +15,7 @@ export interface CountOptions {
}
export const PvCountWidget: ArtalkPlugin = (ctx: ContextApi) => {
- ctx.watchConf([
- 'site', 'pageKey', 'pageTitle', 'countEl', 'pvEl',
- ], (conf) => {
+ ctx.watchConf(['site', 'pageKey', 'pageTitle', 'countEl', 'pvEl'], (conf) => {
initCountWidget({
getApi: () => ctx.getApi(),
siteName: conf.site,
@@ -25,7 +23,7 @@ export const PvCountWidget: ArtalkPlugin = (ctx: ContextApi) => {
pageTitle: conf.pageTitle,
countEl: conf.countEl,
pvEl: conf.pvEl,
- pvAdd: (typeof ctx.conf.pvAdd === 'boolean' ? ctx.conf.pvAdd : true),
+ pvAdd: typeof ctx.conf.pvAdd === 'boolean' ? ctx.conf.pvAdd : true,
})
})
}
@@ -38,13 +36,18 @@ export async function initCountWidget(opt: CountOptions) {
}
// PV
- const initialData = (opt.pvAdd && opt.pageKey) ? {
- [opt.pageKey]: (await opt.getApi().pages.logPv({
- page_key: opt.pageKey,
- page_title: opt.pageTitle,
- site_name: opt.siteName,
- })).data.pv // pv+1 and get pv count
- } : undefined
+ const initialData =
+ opt.pvAdd && opt.pageKey
+ ? {
+ [opt.pageKey]: (
+ await opt.getApi().pages.logPv({
+ page_key: opt.pageKey,
+ page_title: opt.pageTitle,
+ site_name: opt.siteName,
+ })
+ ).data.pv, // pv+1 and get pv count
+ }
+ : undefined
if (opt.pvEl && document.querySelector(opt.pvEl)) {
refreshStatCount(opt, {
@@ -63,7 +66,7 @@ async function refreshStatCount(
query: 'page_pv' | 'page_comment'
numEl: string
data?: CountData
- }
+ },
) {
let data: CountData = args.data || {}
@@ -76,10 +79,12 @@ async function refreshStatCount(
// Fetch count data from server
if (queryPageKeys.length > 0) {
- const res = (await opt.getApi().stats.getStats(args.query, {
- page_keys: queryPageKeys.join(','),
- site_name: opt.siteName,
- })).data.data as CountData
+ const res = (
+ await opt.getApi().stats.getStats(args.query, {
+ page_keys: queryPageKeys.join(','),
+ site_name: opt.siteName,
+ })
+ ).data.data as CountData
data = { ...data, ...res }
}
@@ -90,7 +95,7 @@ async function refreshStatCount(
function applyCountData(selector: string, data: CountData, defaultCount: number) {
document.querySelectorAll(selector).forEach((el) => {
const pageKey = el.getAttribute('data-page-key')
- const count = Number(pageKey ? (data[pageKey]) : defaultCount)
+ const count = Number(pageKey ? data[pageKey] : defaultCount)
el.innerHTML = `${count}`
})
}
diff --git a/ui/artalk/src/plugins/version-check.ts b/ui/artalk/src/plugins/version-check.ts
index 39d1e6938..e4488e043 100644
--- a/ui/artalk/src/plugins/version-check.ts
+++ b/ui/artalk/src/plugins/version-check.ts
@@ -17,14 +17,15 @@ export const VersionCheck: ArtalkPlugin = (ctx) => {
function versionCheck(list: List, feVer: string, beVer: string) {
const comp = Utils.versionCompare(feVer, beVer)
- const sameVer = (comp === 0)
+ const sameVer = comp === 0
if (sameVer) return
const errEl = Utils.createElement(
- ` = {[K in keyof T]: ReturnType extends V ? K : never}[keyof T]
+type TObjectWithFuncs = { [k: string]: (...args: any) => any }
+type TKeysOnlyReturn = {
+ [K in keyof T]: ReturnType extends V ? K : never
+}[keyof T]
type TOmitConditions = TKeysOnlyReturn
type TServiceInjectors = Omit
-export type TInjectedServices = {[K in keyof TServiceInjectors]: ReturnType}
+export type TInjectedServices = {
+ [K in keyof TServiceInjectors]: ReturnType
+}
diff --git a/ui/artalk/src/style/_color.scss b/ui/artalk/src/style/_color.scss
index 3ceb4f61d..7f1b49999 100644
--- a/ui/artalk/src/style/_color.scss
+++ b/ui/artalk/src/style/_color.scss
@@ -1,4 +1,5 @@
-.artalk, .atk-layer-wrap {
+.artalk,
+.atk-layer-wrap {
--at-color-font: #2a2e2e;
--at-color-deep: #2a2e2e;
--at-color-sub: #757575;
@@ -6,7 +7,7 @@
--at-color-meta: #697182;
--at-color-border: #eceff2;
--at-color-light: #4285f4;
- --at-color-bg: #FFF;
+ --at-color-bg: #fff;
--at-color-bg-transl: rgba(255, 255, 255, 0.94);
--at-color-bg-grey: #f3f4f5;
--at-color-bg-grey-transl: rgba(244, 244, 244, 0.75);
@@ -29,7 +30,7 @@
--at-color-bg: #1e2224;
--at-color-bg-transl: rgba(30, 34, 36, 0.95);
--at-color-bg-grey: #46494e;
- --at-color-bg-grey-transl: rgba(8, 8, 8, 0.95);
+ --at-color-bg-grey-transl: rgba(8, 8, 8, 0.95);
--at-color-bg-light: rgba(29, 161, 242, 0.1);
--at-color-main: #0083ff;
--at-color-red: #ff5652;
diff --git a/ui/artalk/src/style/_extend.scss b/ui/artalk/src/style/_extend.scss
index f269a5037..790cde3bc 100644
--- a/ui/artalk/src/style/_extend.scss
+++ b/ui/artalk/src/style/_extend.scss
@@ -7,14 +7,14 @@
&::-webkit-scrollbar-thumb,
&::-webkit-scrollbar-thumb:window-inactive {
- background: rgba(86,86,86,.3);
+ background: rgba(86, 86, 86, 0.3);
}
&::-webkit-scrollbar-thumb:vertical:hover {
- background: rgba(65,74,82,.77);
+ background: rgba(65, 74, 82, 0.77);
}
&::-webkit-scrollbar-thumb:vertical:active {
- background: rgba(41,47,53,.77);
+ background: rgba(41, 47, 53, 0.77);
}
}
diff --git a/ui/artalk/src/style/comment.scss b/ui/artalk/src/style/comment.scss
index d6d59fed1..d430c0f52 100644
--- a/ui/artalk/src/style/comment.scss
+++ b/ui/artalk/src/style/comment.scss
@@ -7,8 +7,12 @@
animation: atkFlashOnce 1s ease-in-out 0s;
@keyframes atkFlashOnce {
- from { background: rgba(0, 131, 255, 0.2); }
- to { background: transparent; }
+ from {
+ background: rgba(0, 131, 255, 0.2);
+ }
+ to {
+ background: transparent;
+ }
}
}
@@ -62,7 +66,7 @@
& > .atk-header {
line-height: 1.5;
font-size: 13px;
- margin-bottom: .5em;
+ margin-bottom: 0.5em;
overflow: hidden;
position: relative;
display: flex;
@@ -80,7 +84,8 @@
margin-right: 6px;
}
- &.atk-nick, &.atk-nick a {
+ &.atk-nick,
+ &.atk-nick a {
font-size: 14px;
color: var(--at-color-main);
text-decoration: none;
@@ -215,7 +220,7 @@
font-size: 15px;
.atk-nick {
- color: var(--at-color-main)
+ color: var(--at-color-main);
}
}
@@ -265,7 +270,8 @@
cursor: pointer;
user-select: none;
- &.atk-error, &.atk-error:hover {
+ &.atk-error,
+ &.atk-error:hover {
color: var(--at-color-red);
}
@@ -288,7 +294,7 @@
display: block;
overflow: hidden;
width: 100%;
- content: " ";
+ content: ' ';
bottom: 0;
height: 80px;
background: var(--at-color-gradient);
@@ -330,12 +336,15 @@
/* Shadow covers */
linear-gradient($cOverwrite 1px, transparent 1px calc(100% - 1px)) center top,
linear-gradient(transparent calc(100% - 1px), $cOverwrite calc(100% - 1px) 1px) center bottom,
- /* Shadows */
- linear-gradient($cBorder 1px, transparent 1px calc(100% - 1px)) center top,
+ /* Shadows */ linear-gradient($cBorder 1px, transparent 1px calc(100% - 1px)) center top,
linear-gradient(transparent calc(100% - 1px), $cBorder calc(100% - 1px) 1px) center bottom;
background-repeat: no-repeat;
background-color: transparent;
- background-size: 100% 1px, 100% 1px, 100% 1px, 100% 1px;
+ background-size:
+ 100% 1px,
+ 100% 1px,
+ 100% 1px,
+ 100% 1px;
/* Opera doesn't support this in the shorthand */
background-attachment: local, local, scroll, scroll;
}
diff --git a/ui/artalk/src/style/list.scss b/ui/artalk/src/style/list.scss
index e316c3331..c590d39bc 100644
--- a/ui/artalk/src/style/list.scss
+++ b/ui/artalk/src/style/list.scss
@@ -53,7 +53,8 @@
}
.atk-dropdown-item {
- span, a {
+ span,
+ a {
display: block;
line-height: 2rem;
position: relative;
@@ -66,7 +67,8 @@
}
}
- &.active span, a {
+ &.active span,
+ a {
color: var(--at-color-main);
}
}
@@ -95,7 +97,8 @@
user-select: none;
position: relative;
- &.atk-on, &.atk-on * {
+ &.atk-on,
+ &.atk-on * {
color: var(--at-color-main);
}
diff --git a/ui/artalk/src/style/main.scss b/ui/artalk/src/style/main.scss
index c9808a0ea..f661217ee 100644
--- a/ui/artalk/src/style/main.scss
+++ b/ui/artalk/src/style/main.scss
@@ -1,4 +1,4 @@
-@import "./_color.scss";
+@import './_color.scss';
@import './comment.scss';
@import './list.scss';
@import './pagination.scss';
@@ -11,7 +11,8 @@
min-height: 200px;
}
-.artalk, .atk-layer-wrap {
+.artalk,
+.atk-layer-wrap {
color: var(--at-color-font);
word-wrap: break-word;
word-break: break-word;
@@ -20,21 +21,30 @@
box-sizing: border-box;
}
- input, textarea, button, optgroup, select {
+ input,
+ textarea,
+ button,
+ optgroup,
+ select {
font-family: inherit;
color: inherit;
font-size: inherit;
}
- $codeFont: source code pro, Consolas, Monaco, Menlo, sans-serif;
+ $codeFont:
+ source code pro,
+ Consolas,
+ Monaco,
+ Menlo,
+ sans-serif;
code {
font-family: $codeFont;
- margin: 0 .05em;
- padding: 0 .4em;
+ margin: 0 0.05em;
+ padding: 0 0.4em;
display: inline-block;
vertical-align: middle;
- font-size: .9em;
+ font-size: 0.9em;
background-color: var(--at-color-bg-grey);
color: var(--at-color-font);
border-radius: 2px;
@@ -47,7 +57,9 @@
}
pre code {
- * { font-family: $codeFont; }
+ * {
+ font-family: $codeFont;
+ }
line-height: $line-height;
display: block;
padding: 10px 15px;
@@ -88,17 +100,18 @@
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 1.5em;
- font-size: .96em
+ font-size: 0.96em;
}
- td, th {
+ td,
+ th {
text-align: left;
padding: 4px 8px 4px 10px;
- border: 1px solid var(--at-color-border)
+ border: 1px solid var(--at-color-border);
}
td {
- vertical-align: top
+ vertical-align: top;
}
tr:nth-child(even) {
@@ -161,45 +174,63 @@
left: 0;
circle {
- stroke-dasharray: 1,200;
+ stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
- animation: atkDash 1.5s ease-in-out infinite, atkColor 6s ease-in-out infinite;
- stroke-linecap: round
+ animation:
+ atkDash 1.5s ease-in-out infinite,
+ atkColor 6s ease-in-out infinite;
+ stroke-linecap: round;
}
}
}
@keyframes atkRotate {
- 100% { transform: rotate(360deg) }
+ 100% {
+ transform: rotate(360deg);
+ }
}
@keyframes atkDash {
0% {
- stroke-dasharray: 1,200;
- stroke-dashoffset: 0
+ stroke-dasharray: 1, 200;
+ stroke-dashoffset: 0;
}
50% {
- stroke-dasharray: 89,200;
- stroke-dashoffset: -35px
+ stroke-dasharray: 89, 200;
+ stroke-dashoffset: -35px;
}
100% {
- stroke-dasharray: 89,200;
- stroke-dashoffset: -124px
+ stroke-dasharray: 89, 200;
+ stroke-dashoffset: -124px;
}
}
@keyframes atkColor {
- 0%,100% { stroke: #ff5652 }
- 40% { stroke: #2196F3 }
- 66% { stroke: #32c787 }
- 80%,90% { stroke: #ffc107 }
+ 0%,
+ 100% {
+ stroke: #ff5652;
+ }
+ 40% {
+ stroke: #2196f3;
+ }
+ 66% {
+ stroke: #32c787;
+ }
+ 80%,
+ 90% {
+ stroke: #ffc107;
+ }
}
@keyframes atkLoadingIconRotate {
- 0% { transform: rotate(0) }
- 100% { transform: rotate(360deg) }
+ 0% {
+ transform: rotate(0);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
}
.atk-loading-icon {
@@ -210,40 +241,51 @@
border-top-color: #29d;
border-left-color: #29d;
border-radius: 50%;
- animation: atkLoadingIconRotate .4s linear infinite;
+ animation: atkLoadingIconRotate 0.4s linear infinite;
}
/* Animations */
.atk-fade-in {
- animation: atkFadeIn both .3s;
+ animation: atkFadeIn both 0.3s;
}
.atk-fade-out {
- animation: atkFadeOut both .2s;
+ animation: atkFadeOut both 0.2s;
}
.atk-rotate {
animation: atkRotate 2s linear infinite;
}
@keyframes atkFadeIn {
- 0% { opacity: 0 }
- to { opacity: 1 }
+ 0% {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
}
@keyframes atkFadeOut {
- 100% { opacity: 0; }
- 0% {}
+ 100% {
+ opacity: 0;
+ }
+ 0% {
+ }
}
@keyframes atkRotate {
- from { transform: rotate(0deg); }
- to { transform: rotate(360deg); }
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
}
.atk-icon {
&::after {
display: block;
- content: "";
+ content: '';
width: 1em;
height: 1em;
background-color: var(--at-color-deep);
@@ -268,7 +310,8 @@
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.70618 4.08515L12.6081 7.06376M1.00041 13.021L11.7376 2L14.6392 4.97861L3.90274 16H1L1.00041 13.021Z' stroke='%234E5969' stroke-width='1.5'/%3E%3C/svg%3E");
}
-.atk-icon-yes::after, .atk-icon-check::after {
+.atk-icon-yes::after,
+.atk-icon-check::after {
mask-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.7071 5.75533L9.92197 17.5404L3.29285 10.9113' stroke='%234E5969'/%3E%3C/svg%3E");
}
@@ -276,7 +319,7 @@
mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.08331 10H17.9166' stroke='%234E5969' stroke-width='2'/%3E%3Cpath d='M10 2.08334L10 17.9167' stroke='%234E5969' stroke-width='2'/%3E%3C/svg%3E");
}
-.atk-icon-close-slim::after {
+.atk-icon-close-slim::after {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'%3E%3Cpath d='M19.8657 5.13431L12.5 12.5L5.13431 19.8657' stroke='%234E5969'/%3E%3Cpath d='M5.13431 5.13432L12.5 12.5L19.8657 19.8657' stroke='%234E5969'/%3E%3C/svg%3E");
}
@@ -284,7 +327,8 @@
mask-image: url('data:image/svg+xml,');
}
-.atk-icon-no::after, .atk-icon-close::after {
+.atk-icon-no::after,
+.atk-icon-close::after {
mask-image: url('data:image/svg+xml,');
}
@@ -301,7 +345,8 @@
color: var(--at-color-yellow);
}
- .atk-error-title, .atk-warn-title {
+ .atk-error-title,
+ .atk-warn-title {
display: inline-block;
padding: 0 15px;
margin-bottom: 20px;
@@ -374,7 +419,7 @@
outline: none;
&:active {
- color: #FFF;
+ color: #fff;
background: var(--at-color-main);
}
@@ -383,7 +428,7 @@
}
&.error {
- color: #FFF;
+ color: #fff;
background: #ff5652;
border-color: #ff5652;
}
@@ -429,7 +474,7 @@
@media only screen and (max-width: 768px) {
.atk-layer-dialog-wrap > .atk-layer-dialog {
- width: 90% !important;
+ width: 90% !important;
}
}
@@ -437,7 +482,7 @@
display: block;
overflow: hidden;
background-color: #2c2c2c;
- color: #FFF;
+ color: #fff;
border-radius: calc($block-radius / 2);
cursor: pointer;
font-size: 14px;
@@ -448,7 +493,7 @@
}
.atk-notify-content {
- color: #FFF;
+ color: #fff;
}
}
@@ -460,7 +505,7 @@
width: 100%;
height: 100%;
z-index: 99998;
- background: rgba(0, 0, 0, .3);
+ background: rgba(0, 0, 0, 0.3);
}
.atk-layer-item {
diff --git a/ui/artalk/src/types/config.ts b/ui/artalk/src/types/config.ts
index dfab3bc41..243adc7ff 100644
--- a/ui/artalk/src/types/config.ts
+++ b/ui/artalk/src/types/config.ts
@@ -4,7 +4,7 @@ import type { EditorApi } from './editor'
export interface ArtalkConfig {
/** 装载元素 */
- el: string|HTMLElement
+ el: string | HTMLElement
/** 页面唯一标识（完整 URL） */
pageKey: string
@@ -31,7 +31,7 @@ export interface ArtalkConfig {
editorTravel: boolean
/** 表情包 */
- emoticons: object|any[]|string|false
+ emoticons: object | any[] | string | false
/** Gravatar 头像 */
gravatar: {
@@ -42,7 +42,7 @@ export interface ArtalkConfig {
}
/** 头像链接生成器 */
- avatarURLBuilder?: (comment: CommentData) => string,
+ avatarURLBuilder?: (comment: CommentData) => string
/** 分页配置 */
pagination: {
@@ -82,19 +82,19 @@ export interface ArtalkConfig {
pvEl: string
/** 夜间模式 */
- darkMode: boolean|'auto'
+ darkMode: boolean | 'auto'
/** 请求超时（单位：秒） */
reqTimeout: number
/** 平铺模式 */
- flatMode: boolean|'auto'
+ flatMode: boolean | 'auto'
/** 嵌套模式 · 最大层数 */
nestMax: number
/** 嵌套模式 · 排序方式 */
- nestSort: 'DATE_ASC'|'DATE_DESC'
+ nestSort: 'DATE_ASC' | 'DATE_DESC'
/** 显示 UA 徽标 */
uaBadge: boolean
@@ -115,7 +115,7 @@ export interface ArtalkConfig {
useBackendConf: boolean
/** 语言本地化 */
- locale: I18n|string
+ locale: I18n | string
/** 后端版本 (系统数据，用户不允许更改) */
apiVersion?: string
diff --git a/ui/artalk/src/types/context.ts b/ui/artalk/src/types/context.ts
index 1ac1dd056..5863baf2d 100644
--- a/ui/artalk/src/types/context.ts
+++ b/ui/artalk/src/types/context.ts
@@ -5,7 +5,15 @@ import type { TMarked } from '@/lib/marked'
import type { I18n } from '@/i18n'
import type { Api, ApiHandlers } from '@/api'
import type { CommentNode } from '@/comment'
-import type { SidebarShowPayload, EventPayloadMap, ArtalkConfig, CommentData, DataManagerApi, ListFetchParams, NotifyLevel } from '.'
+import type {
+ SidebarShowPayload,
+ EventPayloadMap,
+ ArtalkConfig,
+ CommentData,
+ DataManagerApi,
+ ListFetchParams,
+ NotifyLevel,
+} from '.'
/**
* Artalk Context
@@ -94,10 +102,10 @@ export interface ContextApi extends EventManagerFuncs {
checkAdmin(payload: CheckerPayload): Promise
/** i18n 翻译 */
- $t(key: keyof I18n, args?: {[key: string]: string}): string
+ $t(key: keyof I18n, args?: { [key: string]: string }): string
/** 设置夜间模式 */
- setDarkMode(darkMode: boolean|'auto'): void
+ setDarkMode(darkMode: boolean | 'auto'): void
/** 获取配置 */
getConf(): ArtalkConfig
@@ -109,5 +117,8 @@ export interface ContextApi extends EventManagerFuncs {
updateConf(conf: Partial): void
/** 监听配置更新 */
- watchConf(keys: T, effect: (val: Pick) => void): void
+ watchConf(
+ keys: T,
+ effect: (val: Pick) => void,
+ ): void
}
diff --git a/ui/artalk/src/types/data.ts b/ui/artalk/src/types/data.ts
index 12aa25a7e..28bd9c096 100644
--- a/ui/artalk/src/types/data.ts
+++ b/ui/artalk/src/types/data.ts
@@ -187,9 +187,9 @@ export interface NotifyData {
}
export type EmoticonGrpData = {
- name: string,
- type: 'emoticon'|'image'|'emoji'
- items: {key: string, val: string}[]
+ name: string
+ type: 'emoticon' | 'image' | 'emoji'
+ items: { key: string; val: string }[]
}
export type EmoticonListData = EmoticonGrpData[]
@@ -223,11 +223,11 @@ export interface DataManagerApi {
getLoading(): boolean
setLoading(val: boolean): void
- getListLastFetch(): ListLastFetchData|undefined
+ getListLastFetch(): ListLastFetchData | undefined
setListLastFetch(val: ListLastFetchData): void
getComments(): CommentData[]
- findComment(id: number): CommentData|undefined
+ findComment(id: number): CommentData | undefined
fetchComments(params: Partial): void
loadComments(comments: CommentData[]): void
@@ -240,11 +240,11 @@ export interface DataManagerApi {
getNotifies(): NotifyData[]
updateNotifies(notifies: NotifyData[]): void
- getPage(): PageData|undefined
+ getPage(): PageData | undefined
updatePage(pageData: PageData): void
}
-export type NotifyLevel = "i" | "s" | "w" | "e"
+export type NotifyLevel = 'i' | 's' | 'w' | 'e'
export interface UserInfoApiResponseData {
user?: UserData
diff --git a/ui/artalk/src/types/event.ts b/ui/artalk/src/types/event.ts
index 3c0ef9ec5..7ca87f5c1 100644
--- a/ui/artalk/src/types/event.ts
+++ b/ui/artalk/src/types/event.ts
@@ -2,37 +2,44 @@ import type { CommentNode } from '@/comment'
import { CommentData, ListData, ListFetchParams, NotifyData, PageData } from './data'
import { ArtalkConfig, LocalUser } from './config'
-export interface ListErrorData { msg: string, data?: any }
-export interface ListFetchedArgs { params: Partial, data?: ListData, error?: ListErrorData }
+export interface ListErrorData {
+ msg: string
+ data?: any
+}
+export interface ListFetchedArgs {
+ params: Partial
+ data?: ListData
+ error?: ListErrorData
+}
/** EventName to EventPayload Type */
export interface EventPayloadMap {
// Basic lifecycle
- 'created': undefined
- 'mounted': undefined
- 'updated': ArtalkConfig
- 'unmounted': undefined
+ created: undefined
+ mounted: undefined
+ updated: ArtalkConfig
+ unmounted: undefined
- 'list-fetch': Partial // 评论列表请求时
- 'list-fetched': ListFetchedArgs // 评论列表请求后
- 'list-load': CommentData[] // 评论装载前 (list-load payload is partial comments)
+ 'list-fetch': Partial // 评论列表请求时
+ 'list-fetched': ListFetchedArgs // 评论列表请求后
+ 'list-load': CommentData[] // 评论装载前 (list-load payload is partial comments)
- 'list-loaded': CommentData[] // 评论装载后 (list-loaded payload is full comments)
- 'list-failed': ListErrorData // 评论加载错误时
+ 'list-loaded': CommentData[] // 评论装载后 (list-loaded payload is full comments)
+ 'list-failed': ListErrorData // 评论加载错误时
- 'list-goto-first': undefined // 评论列表归位时
- 'list-reach-bottom': undefined // 评论列表滚动到底部时
+ 'list-goto-first': undefined // 评论列表归位时
+ 'list-reach-bottom': undefined // 评论列表滚动到底部时
- 'comment-inserted': CommentData // 评论插入后
- 'comment-updated': CommentData // 评论更新后
- 'comment-deleted': CommentData // 评论删除后
- 'comment-rendered': CommentNode // 评论节点渲染后
+ 'comment-inserted': CommentData // 评论插入后
+ 'comment-updated': CommentData // 评论更新后
+ 'comment-deleted': CommentData // 评论删除后
+ 'comment-rendered': CommentNode // 评论节点渲染后
'notifies-updated': NotifyData[] // 消息列表变更时
- 'list-goto': number // 评论跳转时
- 'page-loaded': PageData // 页面数据更新后
- 'editor-submit': undefined // 编辑器提交时
- 'editor-submitted': undefined // 编辑器提交后
- 'user-changed': LocalUser // 本地用户数据变更时
- 'sidebar-show': undefined // 侧边栏显示
- 'sidebar-hide': undefined // 侧边栏隐藏
+ 'list-goto': number // 评论跳转时
+ 'page-loaded': PageData // 页面数据更新后
+ 'editor-submit': undefined // 编辑器提交时
+ 'editor-submitted': undefined // 编辑器提交后
+ 'user-changed': LocalUser // 本地用户数据变更时
+ 'sidebar-show': undefined // 侧边栏显示
+ 'sidebar-hide': undefined // 侧边栏隐藏
}
diff --git a/ui/artalk/src/types/sidebar.ts b/ui/artalk/src/types/sidebar.ts
index 3ade52ab6..d3c805cd5 100644
--- a/ui/artalk/src/types/sidebar.ts
+++ b/ui/artalk/src/types/sidebar.ts
@@ -1,3 +1,3 @@
export interface SidebarShowPayload {
- view?: 'comments'|'sites'|'pages'|'transfer'
+ view?: 'comments' | 'sites' | 'pages' | 'transfer'
}
diff --git a/ui/artalk/tests/e2e/comment-add.spec.ts b/ui/artalk/tests/e2e/comment-add.spec.ts
index eb7a1506b..288e7d75e 100644
--- a/ui/artalk/tests/e2e/comment-add.spec.ts
+++ b/ui/artalk/tests/e2e/comment-add.spec.ts
@@ -17,7 +17,5 @@ test('Comment Add', async ({ page }) => {
await page.getByPlaceholder('键入内容...').fill(CommentContent)
await page.getByRole('button', { name: '发送评论' }).click()
await page.waitForResponse('http://localhost:23366/api/v2/comments')
- expect(
- await page.locator('.atk-list').getByText(CommentContent).isVisible(),
- ).toBeTruthy()
+ expect(await page.locator('.atk-list').getByText(CommentContent).isVisible()).toBeTruthy()
})
diff --git a/ui/artalk/tests/html/ArtalkCount.html b/ui/artalk/tests/html/ArtalkCount.html
index 55dedeeeb..cc9ca3762 100644
--- a/ui/artalk/tests/html/ArtalkCount.html
+++ b/ui/artalk/tests/html/ArtalkCount.html
@@ -11,6 +11,6 @@
server: 'http://localhost:23366',
site: 'ArtalkDocs',
pvEl: '.pv',
- countEl: ".count",
- });
+ countEl: '.count',
+ })
diff --git a/ui/artalk/tests/html/ArtalkI18n.html b/ui/artalk/tests/html/ArtalkI18n.html
index f2e3deb27..92e01425a 100644
--- a/ui/artalk/tests/html/ArtalkI18n.html
+++ b/ui/artalk/tests/html/ArtalkI18n.html
@@ -1,4 +1,4 @@
-
+
@@ -12,5 +12,5 @@
server: 'http://localhost:23366',
site: 'ArtalkDocs',
locale: 'auto',
- });
+ })
diff --git a/ui/artalk/tests/html/ArtalkLite.html b/ui/artalk/tests/html/ArtalkLite.html
index 43a4e1b00..9b8c15ace 100644
--- a/ui/artalk/tests/html/ArtalkLite.html
+++ b/ui/artalk/tests/html/ArtalkLite.html
@@ -1,5 +1,5 @@
-
+
@@ -11,5 +11,5 @@
pageTitle: 'Artalk Home',
server: 'http://localhost:23366',
site: 'ArtalkDocs',
- });
+ })
diff --git a/ui/artalk/tests/html/CSRF.html b/ui/artalk/tests/html/CSRF.html
index 450114525..2e5f8a619 100644
--- a/ui/artalk/tests/html/CSRF.html
+++ b/ui/artalk/tests/html/CSRF.html
@@ -1,26 +1,24 @@
-
+
-
-
-
-
- CSRF Test
+
+
+
+
+ CSRF Test
-
-
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ui/artalk/tests/setup.ts b/ui/artalk/tests/setup.ts
index f732819ff..060bf715e 100644
--- a/ui/artalk/tests/setup.ts
+++ b/ui/artalk/tests/setup.ts
@@ -3,7 +3,7 @@ import { vi } from 'vitest'
// @see https://github.com/vitest-dev/vitest/issues/821
Object.defineProperty(window, 'matchMedia', {
writable: true,
- value: vi.fn().mockImplementation(query => ({
+ value: vi.fn().mockImplementation((query) => ({
matches: false,
media: query,
onchange: null,
diff --git a/ui/artalk/tests/ui-api.test.ts b/ui/artalk/tests/ui-api.test.ts
index 12a181dd3..101e060dc 100644
--- a/ui/artalk/tests/ui-api.test.ts
+++ b/ui/artalk/tests/ui-api.test.ts
@@ -11,44 +11,56 @@ const InitConf = {
const RemoteConf = {
darkMode: false, // simulate response `false`, but the final should still be `true`, cannot override this
- gravatar: { mirror: 'https://test.avatar.com/unit_test', params: 'test=123' }
+ gravatar: { mirror: 'https://test.avatar.com/unit_test', params: 'test=123' },
}
const ContainerID = 'artalk-container'
beforeAll(() => {
// mock fetch
- global.fetch = vi.fn().mockImplementation((url: string, init: RequestInit) => Promise.resolve({
- ok: true,
- status: 200,
- json: () => {
- let resp: any = {}
-
- const map = {
- '/api/v2/conf': {
- frontend_conf: RemoteConf,
- version: {},
- },
- '/api/v2/stat': { data: { '/': 0 } },
- '/api/v2/pages/pv': { pv: 2 },
- '/api/v2/notifies': { notifies: [], count: 0 },
- '/api/v2/comments': {
- comments: [],
- count: 0,
- roots_count: 0,
- page: { id: 4, admin_only: false, key: '/', url: '/', title: 'Artalk DEMO', site_name: 'ArtalkDocs', vote_up: 0, vote_down: 0, pv: 1 },
+ global.fetch = vi.fn().mockImplementation((url: string, init: RequestInit) =>
+ Promise.resolve({
+ ok: true,
+ status: 200,
+ json: () => {
+ let resp: any = {}
+
+ const map = {
+ '/api/v2/conf': {
+ frontend_conf: RemoteConf,
+ version: {},
+ },
+ '/api/v2/stat': { data: { '/': 0 } },
+ '/api/v2/pages/pv': { pv: 2 },
+ '/api/v2/notifies': { notifies: [], count: 0 },
+ '/api/v2/comments': {
+ comments: [],
+ count: 0,
+ roots_count: 0,
+ page: {
+ id: 4,
+ admin_only: false,
+ key: '/',
+ url: '/',
+ title: 'Artalk DEMO',
+ site_name: 'ArtalkDocs',
+ vote_up: 0,
+ vote_down: 0,
+ pv: 1,
+ },
+ },
}
- }
- const path = new URL(url).pathname
+ const path = new URL(url).pathname
- Object.entries(map).forEach(([k, v]) => {
- if (path.startsWith(k)) resp = v
- })
+ Object.entries(map).forEach(([k, v]) => {
+ if (path.startsWith(k)) resp = v
+ })
- return Promise.resolve(resp)
- }
- })) as any
+ return Promise.resolve(resp)
+ },
+ }),
+ ) as any
})
describe('Artalk instance', () => {
@@ -83,26 +95,30 @@ describe('Artalk instance', () => {
confCopy = JSON.parse(JSON.stringify(conf))
})
- it('should can listen to events and the conf-remoter works (artalk.trigger, artalk.on, conf-remoter)', async () => {
- global.devLoadArtalk()
+ it(
+ 'should can listen to events and the conf-remoter works (artalk.trigger, artalk.on, conf-remoter)',
+ async () => {
+ global.devLoadArtalk()
- const fn = vi.fn()
+ const fn = vi.fn()
- await new Promise(resolve => {
- artalk.on('mounted', (conf) => {
- resolve()
- fn()
+ await new Promise((resolve) => {
+ artalk.on('mounted', (conf) => {
+ resolve()
+ fn()
+ })
})
- })
- expect(fn).toBeCalledTimes(1)
+ expect(fn).toBeCalledTimes(1)
- const conf = artalk.getConf()
- expect(conf.darkMode, "the darkMode is unmodifiable, should still false").toBe(true)
- expect(conf.gravatar, "the gravatar should be modified").toEqual(RemoteConf.gravatar)
- }, {
- timeout: 1000
- })
+ const conf = artalk.getConf()
+ expect(conf.darkMode, 'the darkMode is unmodifiable, should still false').toBe(true)
+ expect(conf.gravatar, 'the gravatar should be modified').toEqual(RemoteConf.gravatar)
+ },
+ {
+ timeout: 1000,
+ },
+ )
it('should other config not changed after conf-remoter loaded (conf-remoter, artalk.update)', () => {
const confNew = JSON.parse(JSON.stringify(artalk.getConf()))
@@ -116,7 +132,9 @@ describe('Artalk instance', () => {
const conf = artalk.getConf()
expect(conf.placeholder).toBe(Placeholder)
- expect(conf.gravatar, "the gravatar which not in update should keep the same").toEqual(RemoteConf.gravatar)
+ expect(conf.gravatar, 'the gravatar which not in update should keep the same').toEqual(
+ RemoteConf.gravatar,
+ )
})
it('should can getEl after config updated (artalk.getEl)', () => {
@@ -144,7 +162,7 @@ describe('Artalk instance', () => {
const fn = vi.fn()
- await new Promise(resolve => {
+ await new Promise((resolve) => {
artalk.on('list-loaded', () => {
resolve(null)
fn()
diff --git a/ui/artalk/tsconfig.json b/ui/artalk/tsconfig.json
index db117822e..bfb75a149 100644
--- a/ui/artalk/tsconfig.json
+++ b/ui/artalk/tsconfig.json
@@ -8,5 +8,5 @@
"@/*": ["./src/*"]
}
},
- "include": ["./src", "./types", "./tests", "./scripts"],
+ "include": ["./src", "./types", "./tests", "./scripts"]
}
diff --git a/ui/artalk/vite.config.ts b/ui/artalk/vite.config.ts
index 074901deb..6e771a405 100644
--- a/ui/artalk/vite.config.ts
+++ b/ui/artalk/vite.config.ts
@@ -4,14 +4,14 @@ import { resolve, dirname } from 'node:path'
import { fileURLToPath } from 'node:url'
import checker from 'vite-plugin-checker'
import dts from 'vite-plugin-dts'
-import { copyFileSync } from "node:fs"
+import { copyFileSync } from 'node:fs'
const __dirname = dirname(fileURLToPath(import.meta.url))
export function getFileName(name: string, format: string) {
- if (format == "umd") return `${name}.js`
- else if (format == "cjs") return `${name}.cjs`
- else if (format == "es") return `${name}.mjs`
+ if (format == 'umd') return `${name}.js`
+ else if (format == 'cjs') return `${name}.cjs`
+ else if (format == 'es') return `${name}.mjs`
return `${name}.${format}.js`
}
@@ -21,41 +21,45 @@ export default defineConfig({
root: __dirname,
build: {
target: 'es2015',
- outDir: resolve(__dirname, "dist"),
+ outDir: resolve(__dirname, 'dist'),
minify: 'terser',
sourcemap: true,
- emptyOutDir: name === 'Artalk', // wait for https://github.com/qmhc/vite-plugin-dts/pull/291
+ emptyOutDir: name === 'Artalk', // wait for https://github.com/qmhc/vite-plugin-dts/pull/291
lib: {
name: 'Artalk',
fileName: (format: string) => getFileName(name, format),
entry: resolve(__dirname, 'src/main.ts'),
- formats: ["es", "umd", "cjs", "iife"]
+ formats: ['es', 'umd', 'cjs', 'iife'],
},
rollupOptions: {
- external: (name === 'ArtalkLite') ? ['marked'] : [],
+ external: name === 'ArtalkLite' ? ['marked'] : [],
output: {
- globals: (name === 'ArtalkLite') ? {
- marked: 'marked',
- } : {},
- assetFileNames: (assetInfo) => (/\.css$/.test(assetInfo.name || '') ? `${name}.css` : "[name].[ext]"),
+ globals:
+ name === 'ArtalkLite'
+ ? {
+ marked: 'marked',
+ }
+ : {},
+ assetFileNames: (assetInfo) =>
+ /\.css$/.test(assetInfo.name || '') ? `${name}.css` : '[name].[ext]',
// @see https://github.com/rollup/rollup/issues/587
// and https://github.com/rollup/rollup/pull/631/files
exports: 'named',
- }
- }
+ },
+ },
},
css: {
preprocessorOptions: {
scss: {
- additionalData: `@import "./src/style/_variables.scss";@import "./src/style/_extend.scss";`
- },
+ additionalData: `@import "./src/style/_variables.scss";@import "./src/style/_extend.scss";`,
+ },
},
},
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
'~': resolve(__dirname),
- }
+ },
},
define: {
ARTALK_LITE: false,
@@ -69,15 +73,17 @@ export default defineConfig({
},
}),
// @see https://github.com/qmhc/vite-plugin-dts
- (name === 'Artalk') ? dts({
- include: ['src'],
- exclude: ['src/**/*.{spec,test}.ts', 'dist'],
- rollupTypes: true,
- afterBuild: () => {
- // @see https://github.com/arethetypeswrong/arethetypeswrong.github.io/tree/main/packages/cli
- // @fix https://github.com/arethetypeswrong/arethetypeswrong.github.io/blob/main/docs/problems/FalseESM.md#consequences
- copyFileSync("dist/main.d.ts", "dist/main.d.cts")
- },
- }) : null,
+ name === 'Artalk'
+ ? dts({
+ include: ['src'],
+ exclude: ['src/**/*.{spec,test}.ts', 'dist'],
+ rollupTypes: true,
+ afterBuild: () => {
+ // @see https://github.com/arethetypeswrong/arethetypeswrong.github.io/tree/main/packages/cli
+ // @fix https://github.com/arethetypeswrong/arethetypeswrong.github.io/blob/main/docs/problems/FalseESM.md#consequences
+ copyFileSync('dist/main.d.ts', 'dist/main.d.cts')
+ },
+ })
+ : null,
],
})
diff --git a/ui/artalk/vitest.config.ts b/ui/artalk/vitest.config.ts
index 3d34be041..7e36f3861 100644
--- a/ui/artalk/vitest.config.ts
+++ b/ui/artalk/vitest.config.ts
@@ -11,6 +11,6 @@ export default mergeConfig(
exclude: [...configDefaults.exclude, 'tests/e2e/*'],
root: fileURLToPath(new URL('./', import.meta.url)),
setupFiles: ['tests/setup.ts'],
- }
- })
+ },
+ }),
)
diff --git a/ui/plugin-katex/index.html b/ui/plugin-katex/index.html
index a7498a56d..6b4f63a0a 100644
--- a/ui/plugin-katex/index.html
+++ b/ui/plugin-katex/index.html
@@ -1,28 +1,28 @@
-
+
-
-
-
-
- plugin-katex
-
-
-
-
-
+
+
+
+
+ plugin-katex
+
+
+
+
+
-
-
+ var artalk = Artalk.init({
+ el: '#comments',
+ pageKey: 'https://artalk.js.org/',
+ pageTitle: 'Artalk Home',
+ server: import.meta.env.DEV ? 'http://localhost:23366' : 'https://artalk.qwqaq.com',
+ site: 'ArtalkDocs',
+ })
+
+
diff --git a/ui/plugin-katex/main.ts b/ui/plugin-katex/main.ts
index ba2102ef3..b9bce7b24 100644
--- a/ui/plugin-katex/main.ts
+++ b/ui/plugin-katex/main.ts
@@ -13,7 +13,9 @@ Artalk.use((ctx) => {
let i = 0
const nextID = () => `__atk_katex_id_${i++}__`
- const mathExpressions: { [key: string]: { type: 'block' | 'inline', expression: string } } = {}
+ const mathExpressions: {
+ [key: string]: { type: 'block' | 'inline'; expression: string }
+ } = {}
function replaceMathWithIds(text: string) {
// Allowing newlines inside of `$$...$$`
@@ -42,30 +44,36 @@ Artalk.use((ctx) => {
const orgCodespan = renderer.codespan
const orgText = renderer.text
- renderer.listitem = (text: string, task: boolean, checked: boolean) => orgListitem(replaceMathWithIds(text), task, checked)
+ renderer.listitem = (text: string, task: boolean, checked: boolean) =>
+ orgListitem(replaceMathWithIds(text), task, checked)
renderer.paragraph = (text: string) => orgParagraph(replaceMathWithIds(text))
- renderer.tablecell = (content: string, flags: any) => orgTablecell(replaceMathWithIds(content), flags)
+ renderer.tablecell = (content: string, flags: any) =>
+ orgTablecell(replaceMathWithIds(content), flags)
renderer.codespan = (code: string) => orgCodespan(replaceMathWithIds(code))
renderer.text = (text: string) => orgText(replaceMathWithIds(text)) // Inline level, maybe unneeded
ctx.updateConf({
- markedReplacers: [(text) => {
- text = text.replace(/(__atk_katex_id_\d+__)/g, (_match, capture) => {
- const v = mathExpressions[capture]
- const type = v.type
- let expression = v.expression
+ markedReplacers: [
+ (text) => {
+ text = text.replace(/(__atk_katex_id_\d+__)/g, (_match, capture) => {
+ const v = mathExpressions[capture]
+ const type = v.type
+ let expression = v.expression
- // replace
tag to \n - expression = expression.replace(//mg, "\n")
+ // replace
tag to \n + expression = expression.replace(//gm, '\n')
- return katex.renderToString(expression, { displayMode: type === 'block' })
- })
+ return katex.renderToString(expression, {
+ displayMode: type === 'block',
+ })
+ })
- return text
- }]
+ return text
+ },
+ ],
})
markedInstance.use({
- renderer
+ renderer,
})
})
diff --git a/ui/plugin-katex/tsconfig.json b/ui/plugin-katex/tsconfig.json
index 9d5129516..122e9c5f0 100644
--- a/ui/plugin-katex/tsconfig.json
+++ b/ui/plugin-katex/tsconfig.json
@@ -3,5 +3,5 @@
"compilerOptions": {
"baseUrl": ".",
"outDir": "dist"
- },
+ }
}
diff --git a/ui/plugin-katex/vite.config.ts b/ui/plugin-katex/vite.config.ts
index 08b541550..b40c1ff01 100644
--- a/ui/plugin-katex/vite.config.ts
+++ b/ui/plugin-katex/vite.config.ts
@@ -6,13 +6,14 @@ export default defineConfig({
base: './',
build: {
target: 'es2015',
- outDir: resolve(__dirname, "dist"),
+ outDir: resolve(__dirname, 'dist'),
minify: 'terser',
lib: {
entry: resolve(__dirname, './main.ts'),
name: 'artalk-plugin-katex',
- fileName: (format) => ((format == "umd") ? 'artalk-plugin-katex.js' : `artalk-plugin-katex.${format}.js`),
- formats: ["es", "umd", "iife"]
+ fileName: (format) =>
+ format == 'umd' ? 'artalk-plugin-katex.js' : `artalk-plugin-katex.${format}.js`,
+ formats: ['es', 'umd', 'iife'],
},
rollupOptions: {
// 确保外部化处理那些你不想打包进库的依赖
@@ -23,9 +24,9 @@ export default defineConfig({
artalk: 'Artalk',
katex: 'katex',
},
- extend: true
- }
- }
+ extend: true,
+ },
+ },
},
plugins: [tsconfigPaths()],
})
diff --git a/ui/plugin-lightbox/global.d.ts b/ui/plugin-lightbox/global.d.ts
index f50f5be95..e7a5aa5af 100644
--- a/ui/plugin-lightbox/global.d.ts
+++ b/ui/plugin-lightbox/global.d.ts
@@ -1,8 +1,8 @@
interface Window {
- lightGallery: (el: any, options: any) => any | undefined;
- Fancybox?: any;
- lightbox?: any;
- PhotoSwipeLightbox?: any;
+ lightGallery: (el: any, options: any) => any | undefined
+ Fancybox?: any
+ lightbox?: any
+ PhotoSwipeLightbox?: any
$?: any
/** Artalk Lightbox 插件类型 */
diff --git a/ui/plugin-lightbox/index.html b/ui/plugin-lightbox/index.html
index ae8c2e85c..890c34c13 100644
--- a/ui/plugin-lightbox/index.html
+++ b/ui/plugin-lightbox/index.html
@@ -1,76 +1,76 @@
-
+
-
-
-
-
- plugin-lightbox
-
-
-
- plugin-lightbox
+
+
+
+ (
- `img:not([atk-emoticon]):not([${LOADED_ATTR}])`
- ).forEach($img => {
- $img.setAttribute(LOADED_ATTR, '') // 初始化标记
+ $content
+ .querySelectorAll(`img:not([atk-emoticon]):not([${LOADED_ATTR}])`)
+ .forEach(($img) => {
+ $img.setAttribute(LOADED_ATTR, '') // 初始化标记
- const $imgLink = document.createElement('a')
- $imgLink.setAttribute('class', IMG_LINK_EL_CLASS)
- $imgLink.setAttribute('href', $img.src)
- $imgLink.setAttribute('data-src', $img.src)
- $imgLink.append($img.cloneNode())
+ const $imgLink = document.createElement('a')
+ $imgLink.setAttribute('class', IMG_LINK_EL_CLASS)
+ $imgLink.setAttribute('href', $img.src)
+ $imgLink.setAttribute('data-src', $img.src)
+ $imgLink.append($img.cloneNode())
- $img.replaceWith($imgLink)
- $imgLinks.push($imgLink)
- })
+ $img.replaceWith($imgLink)
+ $imgLinks.push($imgLink)
+ })
// lightGallery
// @link https://github.com/sachinchoolur/lightGallery
if (typeIs('lightGallery')) {
window.lightGallery($content, {
selector: IMG_LINK_EL_SEL,
- ...(window.ATK_LIGHTBOX_CONF || {})
+ ...(window.ATK_LIGHTBOX_CONF || {}),
})
}
})
diff --git a/ui/plugin-lightbox/tsconfig.json b/ui/plugin-lightbox/tsconfig.json
index 9d5129516..122e9c5f0 100644
--- a/ui/plugin-lightbox/tsconfig.json
+++ b/ui/plugin-lightbox/tsconfig.json
@@ -3,5 +3,5 @@
"compilerOptions": {
"baseUrl": ".",
"outDir": "dist"
- },
+ }
}
diff --git a/ui/plugin-lightbox/vite.config.ts b/ui/plugin-lightbox/vite.config.ts
index a5518fc10..d003e1ff5 100644
--- a/ui/plugin-lightbox/vite.config.ts
+++ b/ui/plugin-lightbox/vite.config.ts
@@ -6,13 +6,14 @@ export default defineConfig({
base: './',
build: {
target: 'es2015',
- outDir: resolve(__dirname, "dist"),
+ outDir: resolve(__dirname, 'dist'),
minify: 'terser',
lib: {
entry: resolve(__dirname, './main.ts'),
name: 'artalk-plugin-lightbox',
- fileName: (format) => ((format == "umd") ? 'artalk-plugin-lightbox.js' : `artalk-plugin-lightbox.${format}.js`),
- formats: ["es", "umd", "iife"]
+ fileName: (format) =>
+ format == 'umd' ? 'artalk-plugin-lightbox.js' : `artalk-plugin-lightbox.${format}.js`,
+ formats: ['es', 'umd', 'iife'],
},
rollupOptions: {
external: ['artalk', 'lightgallery'],
@@ -21,9 +22,9 @@ export default defineConfig({
artalk: 'Artalk',
lightgallery: 'lightgallery',
},
- extend: true
- }
- }
+ extend: true,
+ },
+ },
},
plugins: [tsconfigPaths()],
})
\n`
- + `${colorized.replace(/&/g, '&')}\n`
- + ``
-}
+ return (
+ `\n` +
+ `${colorized.replace(/&/g, '&')}\n` +
+ ``
+ )
+ }
diff --git a/ui/artalk/src/lib/marked.ts b/ui/artalk/src/lib/marked.ts
index 1db1ba3d9..f498ea993 100644
--- a/ui/artalk/src/lib/marked.ts
+++ b/ui/artalk/src/lib/marked.ts
@@ -7,13 +7,13 @@ import { getRenderer } from './marked-renderer'
type Replacer = (raw: string) => string
export type TMarked = typeof libMarked
-let instance: TMarked|undefined
+let instance: TMarked | undefined
let replacers: Replacer[] = []
const markedOptions: MarkedOptions = {
gfm: true,
breaks: true,
- async: false
+ async: false,
}
/** Get Marked instance */
@@ -27,12 +27,16 @@ export function setReplacers(arr: Replacer[]) {
/** 初始化 marked */
export function initMarked() {
- try { if (!libMarked.name) return } catch { return }
+ try {
+ if (!libMarked.name) return
+ } catch {
+ return
+ }
// @see https://github.com/markedjs/marked/blob/4afb228d956a415624c4e5554bb8f25d047676fe/src/Tokenizer.js#L329
libMarked.setOptions({
renderer: getRenderer(),
- ...markedOptions
+ ...markedOptions,
})
instance = libMarked
@@ -41,7 +45,8 @@ export function initMarked() {
/** 解析 markdown */
export default function marked(src: string): string {
let markedContent = getInstance()?.parse(src) as string
- if (!markedContent) { // 无 Markdown 模式简单处理
+ if (!markedContent) {
+ // 无 Markdown 模式简单处理
markedContent = simpleMarked(src)
}
@@ -49,19 +54,26 @@ export default function marked(src: string): string {
// 内容替换器
replacers.forEach((replacer) => {
- if (typeof replacer === 'function')
- dest = replacer(dest)
+ if (typeof replacer === 'function') dest = replacer(dest)
})
return dest
}
function simpleMarked(src: string) {
- return src
- // .replace(/\*\*(.*?)\*\*/g, '$1')
- .replace(/```\s*([^]+?.*?[^]+?[^]+?)```/g, (_, code) => `${renderCode(code)}$1')
- .replace(/!\[(.*?)\]\((.*?)\)/g, (_, alt, imgSrc) => `') + return ( + src + // .replace(/\*\*(.*?)\*\*/g, '$1') + .replace( + /```\s*([^]+?.*?[^]+?[^]+?)```/g, + (_, code) => `
${renderCode(code)}$1')
+ .replace(/!\[(.*?)\]\((.*?)\)/g, (_, alt, imgSrc) => `') + ) } diff --git a/ui/artalk/src/lib/merge-deep.test.ts b/ui/artalk/src/lib/merge-deep.test.ts index 27fc97676..d2939e5a5 100644 --- a/ui/artalk/src/lib/merge-deep.test.ts +++ b/ui/artalk/src/lib/merge-deep.test.ts @@ -8,13 +8,19 @@ describe('Normal operations', () => { }) it('should merge objects (2 levels)', () => { - expect(mergeDeep({ a: { b: 1 } }, { a: { c: 2 } })).toEqual({ a: { b: 1, c: 2 } }) + expect(mergeDeep({ a: { b: 1 } }, { a: { c: 2 } })).toEqual({ + a: { b: 1, c: 2 }, + }) expect(mergeDeep({ a: { b: 1 } }, { a: { b: 2 } })).toEqual({ a: { b: 2 } }) }) it('should merge objects (3 levels)', () => { - expect(mergeDeep({ a: { b: { c: 1 } } }, { a: { b: { d: 2 } } })).toEqual({ a: { b: { c: 1, d: 2 } } }) - expect(mergeDeep({ a: { b: { c: 1 } } }, { a: { b: { c: 2 } } })).toEqual({ a: { b: { c: 2 } } }) + expect(mergeDeep({ a: { b: { c: 1 } } }, { a: { b: { d: 2 } } })).toEqual({ + a: { b: { c: 1, d: 2 } }, + }) + expect(mergeDeep({ a: { b: { c: 1 } } }, { a: { b: { c: 2 } } })).toEqual({ + a: { b: { c: 2 } }, + }) }) }) @@ -23,10 +29,14 @@ describe('Array merge', () => { expect(mergeDeep({ a: [1] }, { a: [2] })).toEqual({ a: [1, 2] }) }) it('should merge arrays (2 levels)', () => { - expect(mergeDeep({ a: { b: [1] } }, { a: { b: [2] } })).toEqual({ a: { b: [1, 2] } }) + expect(mergeDeep({ a: { b: [1] } }, { a: { b: [2] } })).toEqual({ + a: { b: [1, 2] }, + }) }) it('should merge arrays (3 levels)', () => { - expect(mergeDeep({ a: { b: { c: [1] } } }, { a: { b: { c: [2] } } })).toEqual({ a: { b: { c: [1, 2] } } }) + expect(mergeDeep({ a: { b: { c: [1] } } }, { a: { b: { c: [2] } } })).toEqual({ + a: { b: { c: [1, 2] } }, + }) }) }) diff --git a/ui/artalk/src/lib/merge-deep.ts b/ui/artalk/src/lib/merge-deep.ts index ce633b499..34a320ced 100644 --- a/ui/artalk/src/lib/merge-deep.ts +++ b/ui/artalk/src/lib/merge-deep.ts @@ -6,12 +6,12 @@ * @returns New object with merged key/values */ export function mergeDeep
`
+ `
`,
)
const notifyContentEl = notifyElem.querySelector
') @@ -115,11 +122,7 @@ export function showNotify( } /** fade 动画 */ -export function playFadeAnim( - elem: HTMLElement, - after?: () => void, - type: 'in' | 'out' = 'in' -) { +export function playFadeAnim(elem: HTMLElement, after?: () => void, type: 'in' | 'out' = 'in') { elem.classList.add(`atk-fade-${type}`) // 动画结束清除 class const onAnimEnded = () => { @@ -141,7 +144,11 @@ export function playFadeOutAnim(elem: HTMLElement, after?: () => void) { } /** 设置全局错误 */ -export function setError(parentElem: HTMLElement, html: string | HTMLElement | null, title: string = 'Artalk Error') { +export function setError( + parentElem: HTMLElement, + html: string | HTMLElement | null, + title: string = 'Artalk Error', +) { let elem = parentElem.querySelector
${title}
`
+ `${title}
`,
)
parentElem.appendChild(elem)
}
@@ -188,5 +195,5 @@ export function getScrollBarWidth() {
document.body.removeChild(outer)
- return (w1 - w2)
+ return w1 - w2
}
diff --git a/ui/artalk/src/lib/user.ts b/ui/artalk/src/lib/user.ts
index bb173b2aa..fec4f76c0 100644
--- a/ui/artalk/src/lib/user.ts
+++ b/ui/artalk/src/lib/user.ts
@@ -9,9 +9,7 @@ interface UserOpts {
class User {
private data: LocalUser
- constructor(
- private opts: UserOpts
- ) {
+ constructor(private opts: UserOpts) {
// Import from localStorage
const localUser = JSON.parse(window.localStorage.getItem(LOCAL_USER_KEY) || '{}')
@@ -21,7 +19,7 @@ class User {
email: localUser.email || '',
link: localUser.link || '',
token: localUser.token || '',
- isAdmin: localUser.isAdmin || false
+ isAdmin: localUser.isAdmin || false,
}
}
@@ -47,7 +45,7 @@ class User {
logout() {
this.update({
token: '',
- isAdmin: false
+ isAdmin: false,
})
}
diff --git a/ui/artalk/src/lib/utils.ts b/ui/artalk/src/lib/utils.ts
index ece64347f..b03b74638 100644
--- a/ui/artalk/src/lib/utils.ts
+++ b/ui/artalk/src/lib/utils.ts
@@ -23,18 +23,18 @@ export function htmlDecode(str: string) {
}
export function getQueryParam(name: string) {
- const match = RegExp(`[?&]${name}=([^&]*)`).exec(window.location.search);
- return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
+ const match = RegExp(`[?&]${name}=([^&]*)`).exec(window.location.search)
+ return match && decodeURIComponent(match[1].replace(/\+/g, ' '))
}
export function getOffset(el: HTMLElement, relativeTo?: HTMLElement) {
- const getOffsetRecursive = (element: HTMLElement): { top: number, left: number } => {
+ const getOffsetRecursive = (element: HTMLElement): { top: number; left: number } => {
const rect = element.getBoundingClientRect()
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
const scrollTop = window.pageYOffset || document.documentElement.scrollTop
return {
top: rect.top + scrollTop,
- left: rect.left + scrollLeft
+ left: rect.left + scrollLeft,
}
}
@@ -45,7 +45,7 @@ export function getOffset(el: HTMLElement, relativeTo?: HTMLElement) {
return {
top: elOffset.top - relativeToOffset.top,
- left: elOffset.left - relativeToOffset.left
+ left: elOffset.left - relativeToOffset.left,
}
}
@@ -127,12 +127,14 @@ export function onImagesLoaded($container: HTMLElement, event: Function) {
}
}
-export function getGravatarURL(opts: { params: string, mirror: string, emailMD5: string }) {
+export function getGravatarURL(opts: { params: string; mirror: string; emailMD5: string }) {
return `${opts.mirror.replace(/\/$/, '')}/${opts.emailMD5}?${opts.params.replace(/^\?/, '')}`
}
export function sleep(ms: number) {
- return new Promise(resolve => { setTimeout(resolve, ms) });
+ return new Promise((resolve) => {
+ setTimeout(resolve, ms)
+ })
}
/** 版本号比较（a < b :-1 | 0 | b < a :1） */
@@ -140,12 +142,12 @@ export function versionCompare(a: string, b: string) {
const pa = a.split('.')
const pb = b.split('.')
for (let i = 0; i < 3; i++) {
- const na = Number(pa[i])
- const nb = Number(pb[i])
- if (na > nb) return 1
- if (nb > na) return -1
- if (!Number.isNaN(na) && Number.isNaN(nb)) return 1
- if (Number.isNaN(na) && !Number.isNaN(nb)) return -1
+ const na = Number(pa[i])
+ const nb = Number(pb[i])
+ if (na > nb) return 1
+ if (nb > na) return -1
+ if (!Number.isNaN(na) && Number.isNaN(nb)) return 1
+ if (Number.isNaN(na) && !Number.isNaN(nb)) return -1
}
return 0
}
@@ -162,23 +164,31 @@ export async function getCorrectUserAgent() {
const uaData = (navigator as any).userAgentData
let uaGot: any = null
try {
- uaGot = await uaData.getHighEntropyValues(["platformVersion"])
- } catch (err) { console.error(err); return uaRaw }
+ uaGot = await uaData.getHighEntropyValues(['platformVersion'])
+ } catch (err) {
+ console.error(err)
+ return uaRaw
+ }
const majorPlatformVersion = Number(uaGot.platformVersion.split('.')[0])
- if (uaData.platform === "Windows") {
- if (majorPlatformVersion >= 13) { // @link https://docs.microsoft.com/en-us/microsoft-edge/web-platform/how-to-detect-win11
+ if (uaData.platform === 'Windows') {
+ if (majorPlatformVersion >= 13) {
+ // @link https://docs.microsoft.com/en-us/microsoft-edge/web-platform/how-to-detect-win11
// @date 2022-4-29
// Win 11 样本："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 NT 10.0/, 'Windows NT 11.0')
}
}
- if (uaData.platform === "macOS") {
- if (majorPlatformVersion >= 11) { // 11 => BigSur
+ if (uaData.platform === 'macOS') {
+ if (majorPlatformVersion >= 11) {
+ // 11 => BigSur
// @date 2022-4-29
// (Intel Chip) macOS 12.3 样本："Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36"
// (Arm Chip) macOS 样本："Mozilla/5.0 (Macintosh; ARM Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15"
- return uaRaw.replace(/(Mac OS X \d+_\d+_\d+|Mac OS X)/, `Mac OS X ${uaGot.platformVersion.replace(/\./g, '_')}`)
+ return uaRaw.replace(
+ /(Mac OS X \d+_\d+_\d+|Mac OS X)/,
+ `Mac OS X ${uaGot.platformVersion.replace(/\./g, '_')}`,
+ )
}
}
@@ -191,12 +201,14 @@ export function isValidURL(urlRaw: string) {
let url: URL
try {
url = new URL(urlRaw)
- } catch (_) { return false }
- return url.protocol === "http:" || url.protocol === "https:"
+ } catch (_) {
+ return false
+ }
+ return url.protocol === 'http:' || url.protocol === 'https:'
}
/** 获取基于 conf.server 的 URL */
-export function getURLBasedOnApi(opts: { base: string, path: string }) {
+export function getURLBasedOnApi(opts: { base: string; path: string }) {
return getURLBasedOn(opts.base, opts.path)
}
diff --git a/ui/artalk/src/lib/watch-conf.ts b/ui/artalk/src/lib/watch-conf.ts
index 0d8198778..d28c47a54 100644
--- a/ui/artalk/src/lib/watch-conf.ts
+++ b/ui/artalk/src/lib/watch-conf.ts
@@ -1,11 +1,17 @@
import type { ArtalkConfig, ContextApi } from '@/types'
-export function watchConf
-
+
diff --git a/ui/artalk/src/list/list.ts b/ui/artalk/src/list/list.ts
index d7b65229e..bb4fb6192 100644
--- a/ui/artalk/src/list/list.ts
+++ b/ui/artalk/src/list/list.ts
@@ -10,12 +10,16 @@ import { initListPaginatorFunc } from './page'
export default class List extends Component {
/** 列表评论集区域元素 */
$commentsWrap!: HTMLElement
- public getCommentsWrapEl() { return this.$commentsWrap }
+ public getCommentsWrapEl() {
+ return this.$commentsWrap
+ }
protected commentNodes: CommentNode[] = []
- getCommentNodes() { return this.commentNodes }
+ getCommentNodes() {
+ return this.commentNodes
+ }
- constructor (ctx: ContextApi) {
+ constructor(ctx: ContextApi) {
super(ctx)
// Init base element
@@ -34,14 +38,15 @@ export default class List extends Component {
$commentsWrap: this.$commentsWrap,
nestSortBy: this.ctx.conf.nestSort,
nestMax: this.ctx.conf.nestMax,
- flatMode: typeof forceFlatMode === 'boolean' ? forceFlatMode : this.ctx.conf.flatMode as boolean,
+ flatMode:
+ typeof forceFlatMode === 'boolean' ? forceFlatMode : (this.ctx.conf.flatMode as boolean),
// flatMode must be boolean because it had been handled when Artalk.init
createCommentNode: (d, r) => {
const node = createCommentNode(this.ctx, d, r, { forceFlatMode })
this.commentNodes.push(node) // store node instance
return node
},
- findCommentNode: (id) => this.commentNodes.find(c => c.getID() === id),
+ findCommentNode: (id) => this.commentNodes.find((c) => c.getID() === id),
})
}
@@ -65,16 +70,19 @@ export default class List extends Component {
// When comment delete
this.ctx.on('comment-deleted', (comment) => {
- const node = this.commentNodes.find(c => c.getID() === comment.id)
- if (!node) { console.error(`comment node id=${comment.id} not found`);return }
+ const node = this.commentNodes.find((c) => c.getID() === comment.id)
+ if (!node) {
+ console.error(`comment node id=${comment.id} not found`)
+ return
+ }
node.remove()
- this.commentNodes = this.commentNodes.filter(c => c.getID() !== comment.id)
+ this.commentNodes = this.commentNodes.filter((c) => c.getID() !== comment.id)
// TODO: remove child nodes
})
// When comment update
this.ctx.on('comment-updated', (comment) => {
- const node = this.commentNodes.find(c => c.getID() === comment.id)
+ const node = this.commentNodes.find((c) => c.getID() === comment.id)
node && node.setData(comment)
})
}
diff --git a/ui/artalk/src/list/nest.ts b/ui/artalk/src/list/nest.ts
index 5788d7527..d28104bb7 100644
--- a/ui/artalk/src/list/nest.ts
+++ b/ui/artalk/src/list/nest.ts
@@ -8,10 +8,14 @@ export type CommentNode = {
level: number
}
-export type SortByType = 'DATE_DESC'|'DATE_ASC'|'SRC_INDEX'|'VOTE_UP_DESC'
+export type SortByType = 'DATE_DESC' | 'DATE_ASC' | 'SRC_INDEX' | 'VOTE_UP_DESC'
// 构建树状结构列表
-export function makeNestCommentNodeList(srcData: CommentData[], sortBy: SortByType = 'DATE_DESC', nestMax = 2) {
+export function makeNestCommentNodeList(
+ srcData: CommentData[],
+ sortBy: SortByType = 'DATE_DESC',
+ nestMax = 2,
+) {
const nodeList: CommentNode[] = []
const roots = srcData.filter((o) => o.rid === 0)
@@ -25,7 +29,6 @@ export function makeNestCommentNodeList(srcData: CommentData[], sortBy: SortByTy
rootNode.parent = rootNode
nodeList.push(rootNode)
-
;(function loadChildren(parentNode: CommentNode) {
const children = srcData.filter((o) => o.rid === parentNode.id)
if (children.length === 0) return
@@ -55,7 +58,7 @@ export function makeNestCommentNodeList(srcData: CommentData[], sortBy: SortByTy
return v
}
- (function sortLevels(nodes: CommentNode[]) {
+ ;(function sortLevels(nodes: CommentNode[]) {
nodes.forEach((node) => {
node.children = node.children.sort(sortFunc)
sortLevels(node.children)
diff --git a/ui/artalk/src/list/page.ts b/ui/artalk/src/list/page.ts
index 99910dca1..68971e89b 100644
--- a/ui/artalk/src/list/page.ts
+++ b/ui/artalk/src/list/page.ts
@@ -9,7 +9,10 @@ function createPaginatorByConf(conf: Pick${$t('onlyAdminCanReply')}
`))
+ this.kit
+ .useUI()
+ .$textareaWrap.prepend(
+ Utils.createElement(`${$t('onlyAdminCanReply')}
`),
+ )
if (!this.kit.useUser().getData().isAdmin) {
this.kit.useUI().$textarea.style.display = 'none'
diff --git a/ui/artalk/src/plugins/editor/emoticons.scss b/ui/artalk/src/plugins/editor/emoticons.scss
index ec9889a39..0729e31e6 100644
--- a/ui/artalk/src/plugins/editor/emoticons.scss
+++ b/ui/artalk/src/plugins/editor/emoticons.scss
@@ -15,7 +15,7 @@
flex-direction: row;
padding: 5px 10px 35px 10px;
- &[data-type="image"] > .atk-item {
+ &[data-type='image'] > .atk-item {
height: 63px;
width: 63px;
}
diff --git a/ui/artalk/src/plugins/editor/emoticons.ts b/ui/artalk/src/plugins/editor/emoticons.ts
index 8e80f2546..df0167b1f 100644
--- a/ui/artalk/src/plugins/editor/emoticons.ts
+++ b/ui/artalk/src/plugins/editor/emoticons.ts
@@ -8,15 +8,15 @@ import EditorPlug from './_plug'
import type PlugKit from './_kit'
type OwOFormatType = {
- [key: string] : {
- type: 'emoticon'|'emoji'|'image',
- container: {icon: string, text: string}[]
+ [key: string]: {
+ type: 'emoticon' | 'emoji' | 'image'
+ container: { icon: string; text: string }[]
}
}
export default class Emoticons extends EditorPlug {
private emoticons: EmoticonListData = []
- private loadingTask: Promise${$t('updateMsg', { name: (comp < 0) ? $t('frontend') : $t('backend') })}` +
- `
` + - `${$t('currentVersion')}: ${$t('frontend')} ${feVer} / ${$t('backend')} ${beVer}` + - `
`)
+ `` + - `${$t('currentVersion')}: ${$t('frontend')} ${feVer} / ${$t('backend')} ${beVer}` + - `
${$t('updateMsg', { name: comp < 0 ? $t('frontend') : $t('backend') })}` +
+ `
` + + `${$t('currentVersion')}: ${$t('frontend')} ${feVer} / ${$t('backend')} ${beVer}` + + `
`,
+ )
const ignoreBtn = Utils.createElement(`${$t('ignore')}`)
ignoreBtn.onclick = () => {
Ui.setError(list.$el.parentElement!, null)
diff --git a/ui/artalk/src/service.ts b/ui/artalk/src/service.ts
index b1c843794..ab7312dc5 100644
--- a/ui/artalk/src/service.ts
+++ b/ui/artalk/src/service.ts
@@ -30,7 +30,7 @@ const services = {
const user = new User({
onUserChanged: (data) => {
ctx.trigger('user-changed', data)
- }
+ },
})
return user
},
@@ -48,7 +48,7 @@ const services = {
onReload: () => ctx.reload(),
// make sure suffix with a slash, because it will be used as a base url when call `fetch`
- getCaptchaIframeURL: () => `${ctx.conf.server}/api/v2/captcha/?t=${+new Date()}`
+ getCaptchaIframeURL: () => `${ctx.conf.server}/api/v2/captcha/?t=${+new Date()}`,
})
return checkerLauncher
},
@@ -79,17 +79,21 @@ const services = {
// Not inject to ctx immediately,
// but can be injected by other occasions
- editorPlugs(): PlugManager|undefined {
+ editorPlugs(): PlugManager | undefined {
return undefined
- }
+ },
}
export default services
// type tricks for dependency injection
type TServiceImps = typeof services
-type TObjectWithFuncs = {[k: string]: (...args: any) => any}
-type TKeysOnlyReturn` + + `${$t('currentVersion')}: ${$t('frontend')} ${feVer} / ${$t('backend')} ${beVer}` + + `
tag to \n - expression = expression.replace(/
tag to \n + expression = expression.replace(/
-
-
-
-
+
+
+
+
+
+
+
+
+
-
+
-
-
+
+
diff --git a/ui/plugin-lightbox/main.ts b/ui/plugin-lightbox/main.ts
index e3cb543d7..50760f310 100644
--- a/ui/plugin-lightbox/main.ts
+++ b/ui/plugin-lightbox/main.ts
@@ -1,43 +1,41 @@
import Artalk from 'artalk'
Artalk.use((ctx) => {
- const LOADED_ATTR = 'atk-lightbox-loaded'
+ const LOADED_ATTR = 'atk-lightbox-loaded'
const IMG_LINK_EL_CLASS = 'atk-lightbox-img'
- const IMG_LINK_EL_SEL = `.${IMG_LINK_EL_CLASS}`
+ const IMG_LINK_EL_SEL = `.${IMG_LINK_EL_CLASS}`
const typeSet = window.ATK_LIGHTBOX_TYPE
- const typeIs = (t: string) => (
- (!typeSet && window[t]) ||
- ((typeSet || '').toLowerCase() === t.toLowerCase())
- )
+ const typeIs = (t: string) =>
+ (!typeSet && window[t]) || (typeSet || '').toLowerCase() === t.toLowerCase()
// add artalk event listener
ctx.on('list-loaded', () => {
const $imgLinks: HTMLAnchorElement[] = []
- ctx.getCommentNodes().forEach(comment => {
+ ctx.getCommentNodes().forEach((comment) => {
const $content = comment.getRender().$content
- $content.querySelectorAll