@nebulars/primary 0.3.105

package/components/fqa-start/index.vue

@@ -0,0 +1,321 @@
+<style lang="less" scoped>
+.fqa-start {
+  & {
+    padding: @unit;
+    gap: @atom;
+  }
+
+  &-item {
+    line-height: 40px;
+    padding-inline: @gap;
+    border-radius: @radiu * 2 !important;
+    cursor: pointer;
+    transition: all @effect;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.06);
+    }
+
+    &.active {
+      background-color: darken(@color-assist, 5%);
+    }
+  }
+
+  &-slicks {
+    display: flex;
+    overflow-x: auto;
+    position: relative;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    gap: @gap;
+
+    &-left,
+    &-right {
+      width: @size-slick;
+      height: @size-slick;
+      position: absolute;
+    }
+
+    &-left {
+      left: -@size-slick;
+    }
+
+    &-right {
+      right: -@size-slick;
+    }
+  }
+
+  &-slick {
+    flex: 0 0 80px;
+    height: 80px;
+
+    font-size: 13px;
+
+    scroll-snap-align: start;
+    white-space: nowrap;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: @gap;
+    padding: @gap;
+    border: 1px solid @color-line;
+    border-radius: @dozen;
+    background-color: @color-app;
+    transition: all @effect;
+    cursor: pointer;
+
+    &:hover {
+      border-color: darken(@color-line, 25%);
+    }
+
+    &.active {
+      color: @color-professor;
+      border-color: @color-professor;
+    }
+
+    /*
+    &.active {
+      color: @color-app;
+      border-color: #123248;
+      background: #123248;
+    }
+    */
+  }
+
+  &-icon {
+    font-size: 21px;
+  }
+
+  // Special for Mobile -- 主管要求，勿删
+  &-slick-mobile {
+    & {
+      // display: grid;
+      // grid-template-columns: repeat(2, 1fr);
+      // gap: 12px;
+
+      overflow: hidden;
+    }
+
+    &-item {
+      width: 128px;
+      height: 48px;
+      line-height: 42px;
+      border-radius: 8px;
+      padding-left: 16px;
+      float: left;
+
+      border: 1px solid #bdc5d0;
+      background-color: #ffffff;
+
+      margin-top: 12px;
+
+      &:nth-child(even) {
+        margin-right: 12px;
+      }
+
+      span {
+        padding-right: 6px;
+        vertical-align: middle;
+      }
+
+      &:hover {
+        border-color: #e4ebf4;
+        background-color: #e4ebf4;
+      }
+    }
+
+    &-create {
+      width: 100%;
+      height: 54px;
+      line-height: 48px;
+      border-radius: 8px;
+      text-align: center;
+
+      border: 1px solid #00275e;
+      background-color: #d7e2f8;
+
+      span {
+        padding-right: 6px;
+        vertical-align: middle;
+      }
+    }
+  }
+}
+</style>
+
+<template>
+  <a-flex class="fqa-start" vertical>
+    <!--
+    <a-space class="fqa-start-item" @click="createHandler">
+      <EditOutlined />
+      <span>{{ $t('start.create') }}</span>
+    </a-space>
+
+    <template v-for="{ name } in routes">
+      <a-space :class="{ 'fqa-start-item': true, active: $route.name === name }" v-if="surface[name] && hides[name] !== true" @click="trigger(name)">
+        <component :is="icons[name]" />
+        <span>{{ $t(`start.${name}`) }}</span>
+      </a-space>
+    </template>
+    -->
+
+    <!--
+    <fqa-gap />
+
+    <template v-if="app.mobile">
+      <div class="fqa-start-slick-mobile">
+        <template v-for="(item, index) in slicks">
+          <div :class="{ active: current(item), 'fqa-start-slick-mobile-item': !!index, 'fqa-start-slick-mobile-create': !index }" @click="trigger(item)">
+            <component :is="icons[item.name] || item.icon" class="fqa-start-icon" />
+            <span>{{ item.title || $t(`start.${item.name}`) }}</span>
+          </div>
+        </template>
+      </div>
+    </template>
+    -->
+
+    <horizontal :items="slicks">
+      <template #default="{ item }">
+        <div :class="{ 'fqa-start-slick': true, active: current(item) }" @click="trigger(item)">
+          <component :is="icons[item.name] || item.icon" class="fqa-start-icon" />
+          <span>{{ item.title || $t(`start.${item.name}`) }}</span>
+        </div>
+      </template>
+    </horizontal>
+  </a-flex>
+</template>
+
+<script>
+import { namespace } from '@/extension';
+
+export default {
+  props: {
+    ignore: {
+      type: [Array],
+      default: namespace,
+    },
+  },
+
+  data() {
+    return {
+      namespace: undefined,
+      extension: undefined,
+    };
+  },
+
+  computed: {
+    surface() {
+      return Object.fromEntries(this.routes.map(({ name }) => [name, true]));
+    },
+
+    routes() {
+      // Filter Routes by Ignore
+      return this.$router.getRoutes().filter(({ name }) => !this.ignore.includes(name));
+    },
+
+    icons() {
+      // Get Icons from Global Properties
+      return Object.fromEntries(this.routes.map(({ name }) => [name, this[name]?.icon]));
+    },
+
+    hides() {
+      // Get Hiddens from Global Properties
+      return Object.fromEntries(this.routes.map(({ name }) => [name, this[name]?.hidden]));
+    },
+
+    mobiles() {
+      // Get Mobiles from Global Properties
+      return Object.fromEntries(this.routes.map(({ name }) => [name, this.app.mobile ? this[name]?.mobile : undefined]));
+    },
+
+    envs() {
+      // Get Envs from Global Properties
+      return Object.fromEntries(this.routes.map(({ name }) => [name, this[name]?.env || []]));
+    },
+
+    slicks() {
+      return [
+        // Create First
+        { name: 'create', icon: 'EditOutlined' },
+        // Dynamic Routes
+        ...this.routes.filter(({ name }) => this.surface[name] && this.hides[name] !== true && this.mobiles[name] !== false && this.envs[name].includes(this.$util.mode)),
+        // Extensions
+        ...this.$util.remote(globalThis.__PRESET__.ENV),
+      ];
+    },
+  },
+
+  methods: {
+    current(item) {
+      // Get Path
+      const path = this.$route?.redirectedFrom?.path?.replace(/^\/remote/, '');
+
+      // Set Special for Remote
+      if (path && path.match(item.name)) return true;
+
+      // Normal Route
+      return item.name === this.$route.name;
+    },
+
+    async trigger(item) {
+      // Get Namespace
+      const { name: namespace } = item;
+
+      // Remote for Extension
+      if (item.extension) {
+        this.namespace = item.name;
+        this.extension = item.path;
+      }
+
+      // Create
+      if (namespace === 'create') {
+        return await this.createHandler();
+      }
+
+      // Tolerance
+      const fn = this[`${namespace}Handler`] || this[`remoteHandler`];
+
+      // Programs
+      await fn();
+    },
+
+    async createHandler() {
+      // Trigger Clean
+      this.$store.dispatch('sseengine/CLEAN');
+
+      // For Web
+      this.$util.message.send({ id: 'new' }, () => {
+        // For MNP
+        this.$router.push({ name: 'chat' });
+      });
+    },
+  },
+
+  created() {
+    // Extension Handlers
+    this.$util.extension.Handlers(this, name => {
+      // Clean Select
+      this.$store.dispatch('sseengine/STATE_UPDATE', { select: [] });
+
+      // Set Route - Special for Remote
+      const route = name === 'remote' ? { path: `/remote/${(this.extension || this.$api.remote).replace(/^http(s)?\:\/\//, '')}` } : { name };
+
+      // For Web
+      this.$util.message.send({ route }, () => {
+        // For MNP
+        this.$router.push(route);
+      });
+
+      // Clean
+      this.extension = undefined;
+    });
+  },
+};
+</script>

package/components/fqa-start/modify.less

@@ -0,0 +1,11 @@
+.fqa-start {
+  .slick-slide {
+    width: 120px !important;
+  }
+
+  .vue-horizontal {
+    .v-hl-container {
+      gap: @gap;
+    }
+  }
+}

package/components/fqa-switcher/index.vue

@@ -0,0 +1,94 @@
+<style lang="less" scoped>
+.fqa-switcher {
+  --width: 96px;
+  --height: 36px;
+
+  & {
+    padding: @atom;
+    background-color: @color-assist;
+    position: relative;
+  }
+
+  &,
+  &:after {
+    border-radius: @radiu * 2;
+  }
+
+  &:after,
+  &-item {
+    width: var(--width);
+    height: var(--height);
+    line-height: var(--height);
+    padding: @unit @gap;
+  }
+
+  &:after {
+    content: '';
+    left: @atom;
+    top: @atom;
+    position: absolute;
+    background-color: @color-sider;
+    transition: all @fast;
+  }
+
+  &-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 1;
+    position: relative;
+  }
+
+  &.left {
+    &:after {
+      transform: translateX(0);
+    }
+  }
+
+  &.middle {
+    &:after {
+      transform: translateX(calc(var(--width) + @atom * 2));
+    }
+  }
+
+  &.right {
+    &:after {
+      transform: translateX(calc(var(--width) * 2 + @atom * 4));
+    }
+  }
+}
+</style>
+
+<template>
+  <a-space :class="{ 'fqa-switcher': true, [position]: true }">
+    <div class="fqa-switcher-item" v-for="({ key, title }, index) in menus" :key="key" @click="clickHandler(key, index)">{{ title }}</div>
+  </a-space>
+</template>
+
+<script>
+export default {
+  props: {
+    active: {
+      type: [String, null],
+      default: null,
+    },
+    menus: {
+      type: [Array],
+      default: [],
+    },
+  },
+
+  computed: {
+    position() {
+      return ['left', 'middle', 'right'][this.menus.findIndex(item => item.key === this.active)];
+    },
+  },
+
+  methods: {
+    clickHandler(key, index) {
+      this.$emit('update:active', key);
+    },
+  },
+};
+</script>

package/components/fqa-table/index.vue

@@ -0,0 +1,42 @@
+<style lang="less" scoped>
+.fqa-table {
+  &-text {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
+</style>
+
+<template>
+  <a-table class="fqa-table" :columns="columns" :data-source="source" :pagination="false" :scroll="{ x: 'max-content', y: 'max-content' }" :sticky="true">
+    <template #bodyCell="{ text, record, index, column }">
+      <template v-if="column?.key === 'key'">
+        <slot name="tail" :column="column" :record="record" :index="index" />
+      </template>
+      <template v-else>
+        <div class="fqa-table-text" :style="{ maxWidth: `${column?.maxWidth}px` }">{{ translation[text] || text }}</div>
+      </template>
+    </template>
+  </a-table>
+</template>
+
+<script>
+export default {
+  props: {
+    columns: {
+      type: [Array],
+      default: [],
+    },
+
+    source: {
+      type: [Array],
+      default: [],
+    },
+
+    translation: {
+      type: [Object],
+      default: {},
+    },
+  },
+};
+</script>

package/components/fqa-table/modify.less

@@ -0,0 +1,56 @@
+.fqa-table {
+  .ant-table {
+    background-color: darken(@color-assist, 1%);
+  }
+
+  .ant-table-header {
+    background-color: darken(@color-assist, 5%);
+
+    .ant-table-cell-scrollbar {
+      box-shadow: none !important;
+    }
+  }
+
+  .ant-empty-description {
+    color: @color-text;
+  }
+
+  .ant-table-thead {
+    .ant-table-cell {
+      color: @color-text;
+      border-bottom-color: @color-line !important;
+      background-color: darken(@color-assist, 1%);
+      line-height: 0.1;
+
+      &-content {
+        line-height: 1;
+      }
+
+      &:before {
+        background-color: @color-line !important;
+      }
+    }
+  }
+
+  .ant-table-tbody {
+    .ant-table-row,
+    .ant-table-placeholder {
+      &:hover {
+        .ant-table-cell {
+          background: darken(@color-assist, 1%) !important;
+        }
+      }
+    }
+
+    .ant-table-cell {
+      color: @color-text;
+      border-top-color: @color-line !important;
+      border-bottom-color: @color-line !important;
+      background-color: @color-assist;
+    }
+
+    .ant-table-cell-row-hover {
+      background: darken(@color-assist, 1%) !important;
+    }
+  }
+}

package/components/fqa-text/index.vue

@@ -0,0 +1,58 @@
+<style lang="less" scoped>
+.fqa-text {
+  color: @color-text;
+
+  &.level-1 {
+    color: darken(@color-text, 0%);
+  }
+  &.level-2 {
+    color: darken(@color-text, 12%);
+  }
+  &.level-3 {
+    color: darken(@color-text, 24%);
+  }
+  &.level-4 {
+    color: darken(@color-text, 36%);
+  }
+  &.level-5 {
+    color: darken(@color-text, 48%);
+  }
+  &.level-6 {
+    color: darken(@color-text, 60%);
+  }
+}
+</style>
+
+<template>
+  <span class="fqa-text" :class="{ ...classic }" :style="{ ...css }"><slot /></span>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      type: [String, Number],
+      default: 14,
+    },
+
+    level: {
+      type: [String, Number],
+      default: 1,
+    },
+  },
+
+  computed: {
+    classic() {
+      return {
+        [`level-${this.level}`]: true,
+      };
+    },
+
+    css() {
+      return {
+        fontSize: `${this.size}px`,
+      };
+    },
+  },
+};
+</script>

package/components/fqa-welcome/index.vue

@@ -0,0 +1,29 @@
+<style lang="less" scoped>
+.fqa-welcome {
+  height: 100%;
+  text-align: center;
+
+  h1 {
+    line-height: 4rem;
+    font-size: 1.68rem;
+    font-family: pacifico;
+    color: @color-subtext;
+  }
+}
+</style>
+
+<template>
+  <a-flex class="fqa-welcome" justify="center" align="center" vertical>
+    <a-space direction="vertical" :size="50">
+      <!-- <a-avatar :size="200" :src="$util.uri(`logo.png`)" /> -->
+      <fqa-logo :size="18" />
+      <h1 v-html="$t('welcome.slogan')"></h1>
+    </a-space>
+  </a-flex>
+</template>
+
+<script>
+export default {
+  name: 'fqa-welcome',
+};
+</script>

package/components/fqa-worcha/index.vue

@@ -0,0 +1,107 @@
+<style lang="less" scoped>
+.fqa-worcha {
+  & {
+    display: flex;
+    flex-direction: column;
+    gap: @atom;
+    padding-left: @gap;
+  }
+
+  &-title {
+    display: flex;
+    justify-content: space-between;
+    flex: 10;
+  }
+
+  &-container {
+    display: flex;
+  }
+
+  &-context {
+    flex: 10;
+    text-align: justify;
+  }
+
+  &-duration {
+    flex: 2;
+    text-align: right;
+  }
+}
+
+.fqa-worcha-error {
+  padding-inline: @gap;
+}
+</style>
+
+<template>
+  <div class="fqa-worcha-error" v-if="compliance === false">服务器繁忙，请稍后重试 ~</div>
+
+  <div class="fqa-worcha" v-else>
+    <div class="fqa-worcha-title" v-if="source.stage === 'process_start'">
+      <template v-if="!source.finish && sseengine.produce">
+        <span>{{ source.is_rag ? '检索中' : '思考中' }} ...</span>
+        <!-- <span>{{ $util.time.Duration(source.total * 1000) }}</span> -->
+        <fqa-icon icon="LoadingOutlined" />
+      </template>
+    </div>
+    <div class="fqa-worcha-container" :size="16" v-else>
+      <div class="fqa-worcha-context">
+        <span v-if="source.name">【{{ source.name }}】</span>
+        <span>{{ source.content }}</span>
+      </div>
+      <div class="fqa-worcha-duration">
+        <fqa-icon v-if="source.duration === undefined && sseengine.produce" icon="LoadingOutlined" :size="18" />
+        <template v-else>{{ $util.time.Duration(source.duration * 1000) }}</template>
+      </div>
+    </div>
+
+    <template v-if="source.children">
+      <template v-for="item in source.children">
+        <fqa-worcha :source="item" />
+      </template>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    source: {
+      type: [Object],
+      default: {},
+    },
+
+    compliance: {
+      type: [Number],
+      default: 0,
+    },
+
+    up: {
+      type: [String],
+      default: '',
+    },
+
+    rag: {
+      type: [Number],
+      default: 0,
+    },
+  },
+
+  watch: {
+    source: {
+      async handler({ finish, compliance }) {
+        if (finish) {
+          this.$emit('finish', finish);
+        }
+
+        if (compliance === false && this.compliance === 0) {
+          await this.$store.dispatch('sseengine/COMPLIANCE', this.up);
+        }
+      },
+
+      deep: true,
+      immediate: true,
+    },
+  },
+};
+</script>