V7.2 TODO

webui/src/api/model/labs.ts

@@ -0,0 +1,18 @@
+export interface Experiment {
+  /**
+   * 实验是否已激活
+   */
+  activated?: boolean
+  /**
+   * 实验描述(Markdown)
+   */
+  description?: string
+  /**
+   * 实验ID
+   */
+  id?: string
+  /**
+   * 实验标题
+   */
+  title?: string
+}

webui/src/components/iconFont.ts

@@ -2,7 +2,7 @@ import { Icon } from '@arco-design/web-vue'
 import { defineComponent, h } from 'vue'
 
 const IconFont = Icon.addFromIconFontCn({
-  src: 'https://at.alicdn.com/t/c/font_4646549_xrh0h0mmvwj.js'
+  src: 'https://at.alicdn.com/t/c/font_4646549_kvl69xg55a.js'
 })
 
 export function genIconComponent(type: string) {

webui/src/service/labs.ts

@@ -0,0 +1,37 @@
+import type { CommonResponse, CommonResponseWithoutData } from '@/api/model/common'
+import type { Experiment } from '@/api/model/labs'
+import { useEndpointStore } from '@/stores/endpoint'
+import urlJoin from 'url-join'
+import { getCommonHeader } from './utils'
+
+export async function GetExperimentList(): Promise<CommonResponse<{ experiments: Experiment[] }>> {
+  const endpointStore = useEndpointStore()
+  await endpointStore.serverAvailable
+
+  const url = new URL(urlJoin(endpointStore.endpoint, 'api/laboratory/experiments'), location.href)
+  return fetch(url, { headers: getCommonHeader() }).then((res) => {
+    endpointStore.assertResponseLogin(res)
+    return res.json()
+  })
+}
+
+export async function SetExperimentStatus(
+  id: string,
+  status: boolean
+): Promise<CommonResponseWithoutData> {
+  const endpointStore = useEndpointStore()
+  await endpointStore.serverAvailable
+
+  const url = new URL(
+    urlJoin(endpointStore.endpoint, `api/laboratory/experiment/${id}`),
+    location.href
+  )
+  return fetch(url, {
+    method: 'PUT',
+    headers: getCommonHeader(),
+    body: JSON.stringify({ status })
+  }).then((res) => {
+    endpointStore.assertResponseLogin(res)
+    return res.json()
+  })
+}

webui/src/views/settings/components/labs/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <a-space direction="vertical" fill>
+    <a-typography-title :heading="3">
+      {{ t('page.settings.tab.labs') }}
+    </a-typography-title>
+    <a-alert :title="t('page.settings.tab.labs.welcome')">
+      <i18n-t keypath="page.settings.tab.labs.welcome.content">
+        <template #github>
+          <a-link href="https://github.com/PBH-BTN/PeerBanHelper/issues">Github</a-link>
+        </template>
+      </i18n-t>
+    </a-alert>
+    <a-typography-title :heading="5">
+      {{ t('page.settings.tab.labs.list') }}
+    </a-typography-title>
+    <div style="width: 100%; display: flex; justify-content: center">
+      <a-list :data="data?.data.experiments" style="max-width: 60rem" :loading="loading">
+        <template #item="{ item }">
+          <a-list-item action-layout="vertical">
+            <template #actions>
+              <a-space
+                >{{ t('page.settings.tab.labs.action.enable') }}
+                <a-switch
+                  v-model="item.activated"
+                  size="small"
+                  :before-change="(value) => switchExperimentStatus(item.id, value as boolean)"
+                />
+              </a-space>
+            </template>
+            <a-list-item-meta>
+              <template #title>
+                {{ item.title }} &nbsp;
+                <a-tag v-if="item.activated" color="green">{{
+                  t('page.settings.tab.labs.enabled')
+                }}</a-tag>
+              </template>
+              <template #description>
+                <!--eslint-disable-next-line vue/no-v-html-->
+                <div v-html="md.render(item.description)"></div>
+              </template>
+            </a-list-item-meta>
+          </a-list-item>
+        </template>
+      </a-list>
+    </div>
+  </a-space>
+</template>
+<script setup lang="ts">
+import { GetExperimentList, SetExperimentStatus } from '@/service/labs'
+import { Message } from '@arco-design/web-vue'
+import markdownit from 'markdown-it'
+import { useI18n } from 'vue-i18n'
+import { useRequest } from 'vue-request'
+const { t } = useI18n()
+const { data, loading, refresh } = useRequest(GetExperimentList)
+const md = new markdownit()
+const switchExperimentStatus = async (id: string, activated: boolean) => {
+  try {
+    const res = await SetExperimentStatus(id, activated)
+    if (res.success) {
+      refresh()
+      return true
+    } else throw new Error(res.message)
+  } catch (e) {
+    if (e instanceof Error) Message.error(e.message)
+    return false
+  }
+}
+</script>

webui/src/views/settings/components/labs/locale/en-US.ts

@@ -0,0 +1,9 @@
+export default {
+  'page.settings.tab.labs': 'Labs',
+  'page.settings.tab.labs.welcome': 'Welcome to Labs',
+  'page.settings.tab.labs.welcome.content':
+    'This is the Lab, where we will try some unstable new features. These features may have better or worse effects on the ban. Please turn them on or off according to your needs. If you have any suggestions or ideas, please submit an issue or PR on {github}.',
+  'page.settings.tab.labs.list': 'Experiment List',
+  'page.settings.tab.labs.action.enable': 'Enable',
+  'page.settings.tab.labs.enabled': 'Enabled'
+}

webui/src/views/settings/components/labs/locale/zh-CN.ts

@@ -0,0 +1,9 @@
+export default {
+  'page.settings.tab.labs': '实验室',
+  'page.settings.tab.labs.welcome': '欢迎来到实验室',
+  'page.settings.tab.labs.welcome.content':
+    '这里是实验室，我们会在这里尝试一些不够稳定的新功能，这些功能对于封禁效果可能会更好或者更差，请根据你的需求自行开关。如果您有任何建议或者想法，欢迎在 {github} 上提交 issue 或者 PR。',
+  'page.settings.tab.labs.list': '实验列表',
+  'page.settings.tab.labs.action.enable': '启用',
+  'page.settings.tab.labs.enabled': '已启用'
+}

webui/src/views/settings/index.vue

@@ -1,21 +1,34 @@
 <template>
   <a-tabs :default-active-key="defaultActiveKey" lazy-load animation type="rounded">
-    <a-tab-pane :key="0" :title="t('page.settings.tab.info.title')">
+    <a-tab-pane :key="0">
+      <template #title>
+        <IconFont type="icon-icon_status" /> &nbsp;{{ t('page.settings.tab.info.title') }}
+      </template>
       <RunningStatus />
     </a-tab-pane>
-    <a-tab-pane :key="1" :title="t('page.settings.tab.config')">
+    <a-tab-pane :key="1">
+      <template #title> <icon-settings />&nbsp; {{ t('page.settings.tab.config') }} </template>
       <ConfigForm />
     </a-tab-pane>
-    <a-tab-pane :key="2" :title="t('page.settings.tab.profile')">
+    <a-tab-pane :key="2">
+      <template #title>
+        <IconFont type="icon-un-config-o" /> &nbsp;{{ t('page.settings.tab.profile') }}
+      </template>
       <ProfileForm />
     </a-tab-pane>
+    <a-tab-pane :key="3">
+      <template #title> <icon-experiment /> &nbsp;{{ t('page.settings.tab.labs') }} </template>
+      <Labs />
+    </a-tab-pane>
   </a-tabs>
 </template>
 <script setup lang="ts">
+import IconFont from '@/components/iconFont'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 import ConfigForm from './components/config/index.vue'
 import RunningStatus from './components/info/index.vue'
+import Labs from './components/labs/index.vue'
 import ProfileForm from './components/profile/index.vue'
 const { t } = useI18n()
 
@@ -24,7 +37,8 @@ const defaultActiveKey = query.tab
   ? ({
       info: 0,
       config: 1,
-      profile: 2
+      profile: 2,
+      lab: 3
     }[query.tab as string] ?? 0)
   : 0
 </script>

webui/src/views/settings/locale/en-US.ts

@@ -1,10 +1,12 @@
 import ConfigLocale from '../components/config/locale/en-US'
 import InfoLocale from '../components/info/locale/en-US'
+import LabsLocalel from '../components/labs/locale/en-US'
 import ProfileLocale from '../components/profile/locale/en-US'
 export default {
   'page.settings.tab.config': 'Settings',
   'page.settings.tab.profile': 'Profile',
   ...ProfileLocale,
   ...ConfigLocale,
-  ...InfoLocale
+  ...InfoLocale,
+  ...LabsLocalel
 }

webui/src/views/settings/locale/zh-CN.ts

@@ -1,10 +1,12 @@
 import ConfigLocale from '../components/config/locale/zh-CN'
 import InfoLocale from '../components/info/locale/zh-CN'
+import LabsLocalel from '../components/labs/locale/zh-CN'
 import ProfileLocale from '../components/profile/locale/zh-CN'
 export default {
   'page.settings.tab.config': '基础设置',
   'page.settings.tab.profile': '首选项',
   ...ProfileLocale,
   ...ConfigLocale,
-  ...InfoLocale
+  ...InfoLocale,
+  ...LabsLocalel
 }