add fake channel

2026-07-09 18:14:45 +08:00
parent 8fed449b95
commit 9c852cd99b
37 changed files with 4300 additions and 679 deletions
@@ -12,6 +12,7 @@ import Telegram from './channels/Telegram.vue';
 import Instagram from './channels/Instagram.vue';
 import Tiktok from './channels/Tiktok.vue';
 import Voice from './channels/Voice.vue';
+import Fake from './channels/Fake.vue';

 const channelViewList = {
  facebook: Facebook,
@@ -26,6 +27,7 @@ const channelViewList = {
  instagram: Instagram,
  tiktok: Tiktok,
  voice: Voice,
+  fake: Fake,
 };

 export default defineComponent({
@@ -77,6 +77,12 @@ const channelList = computed(() => {
      description: t('INBOX_MGMT.ADD.AUTH.CHANNEL.INSTAGRAM.DESCRIPTION'),
      icon: 'i-woot-instagram',
    },
+    {
+      key: 'fake',
+      title: t('INBOX_MGMT.ADD.AUTH.CHANNEL.FAKE.TITLE'),
+      description: t('INBOX_MGMT.ADD.AUTH.CHANNEL.FAKE.DESCRIPTION'),
+      icon: 'i-woot-api',
+    },
  ];

  if (hasTiktokConfigured.value) {
@@ -0,0 +1,164 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import { required } from '@vuelidate/validators';
+import router from '../../../../index';
+import PageHeader from '../../SettingsSubPageHeader.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+const shouldBeWebhookUrl = (value = '') =>
+  value ? value.startsWith('http') : true;
+
+export default {
+  components: {
+    PageHeader,
+    NextButton,
+  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      channelName: '',
+      identifier: '',
+      webhookUrl: '',
+      token: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'inboxes/getUIFlags',
+    }),
+  },
+  validations: {
+    channelName: { required },
+    identifier: { required },
+    webhookUrl: { shouldBeWebhookUrl },
+  },
+  methods: {
+    async createChannel() {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        return;
+      }
+
+      try {
+        const fakeChannel = await this.$store.dispatch(
+          'inboxes/createChannel',
+          {
+            name: this.channelName?.trim(),
+            channel: {
+              type: 'fake',
+              identifier: this.identifier?.trim(),
+              webhook_url: this.webhookUrl?.trim(),
+              token: this.token?.trim(),
+            },
+          }
+        );
+
+        router.replace({
+          name: 'settings_inboxes_add_agents',
+          params: {
+            page: 'new',
+            inbox_id: fakeChannel.id,
+          },
+        });
+      } catch (error) {
+        useAlert(
+          error.message ||
+            this.$t('INBOX_MGMT.ADD.FAKE_CHANNEL.API.ERROR_MESSAGE')
+        );
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="h-full w-full p-6 col-span-6">
+    <PageHeader
+      :header-title="$t('INBOX_MGMT.ADD.FAKE_CHANNEL.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.FAKE_CHANNEL.DESC')"
+    />
+    <form
+      class="flex flex-wrap flex-col mx-0"
+      @submit.prevent="createChannel()"
+    >
+      <div class="flex-shrink-0 flex-grow-0">
+        <label :class="{ error: v$.channelName.$error }">
+          {{ $t('INBOX_MGMT.ADD.FAKE_CHANNEL.CHANNEL_NAME.LABEL') }}
+          <input
+            v-model="channelName"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.FAKE_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
+            "
+            @blur="v$.channelName.$touch"
+          />
+          <span v-if="v$.channelName.$error" class="message">{{
+            $t('INBOX_MGMT.ADD.FAKE_CHANNEL.CHANNEL_NAME.ERROR')
+          }}</span>
+        </label>
+      </div>
+
+      <div class="flex-shrink-0 flex-grow-0">
+        <label :class="{ error: v$.identifier.$error }">
+          {{ $t('INBOX_MGMT.ADD.FAKE_CHANNEL.IDENTIFIER.LABEL') }}
+          <input
+            v-model="identifier"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.FAKE_CHANNEL.IDENTIFIER.PLACEHOLDER')
+            "
+            @blur="v$.identifier.$touch"
+          />
+          <span v-if="v$.identifier.$error" class="message">{{
+            $t('INBOX_MGMT.ADD.FAKE_CHANNEL.IDENTIFIER.ERROR')
+          }}</span>
+        </label>
+      </div>
+
+      <div class="flex-shrink-0 flex-grow-0">
+        <label :class="{ error: v$.webhookUrl.$error }">
+          {{ $t('INBOX_MGMT.ADD.FAKE_CHANNEL.WEBHOOK_URL.LABEL') }}
+          <input
+            v-model="webhookUrl"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.FAKE_CHANNEL.WEBHOOK_URL.PLACEHOLDER')
+            "
+            @blur="v$.webhookUrl.$touch"
+          />
+          <p class="help-text">
+            {{ $t('INBOX_MGMT.ADD.FAKE_CHANNEL.WEBHOOK_URL.SUBTITLE') }}
+          </p>
+        </label>
+      </div>
+
+      <div class="flex-shrink-0 flex-grow-0">
+        <label>
+          {{ $t('INBOX_MGMT.ADD.FAKE_CHANNEL.TOKEN.LABEL') }}
+          <input
+            v-model="token"
+            type="text"
+            :placeholder="$t('INBOX_MGMT.ADD.FAKE_CHANNEL.TOKEN.PLACEHOLDER')"
+          />
+          <p class="help-text">
+            {{ $t('INBOX_MGMT.ADD.FAKE_CHANNEL.TOKEN.SUBTITLE') }}
+          </p>
+        </label>
+      </div>
+
+      <div class="w-full mt-4">
+        <NextButton
+          :is-loading="uiFlags.isCreating"
+          type="submit"
+          solid
+          blue
+          :label="$t('INBOX_MGMT.ADD.FAKE_CHANNEL.SUBMIT_BUTTON')"
+        />
+      </div>
+    </form>
+  </div>
+</template>