feat: 开站目录变更quick-start

src/views/system/quick-start/components/ConfigNeInfo.vue

@@ -0,0 +1,813 @@
+<script setup lang="ts">
+import { Modal, message } from 'ant-design-vue/lib';
+import { onMounted, reactive, toRaw } from 'vue';
+import {
+  addNeInfo,
+  delNeInfo,
+  listAllNeInfo,
+  updateNeInfo,
+} from '@/api/ne/neInfo';
+import { neHostAuthorizedRSA, testNeHost } from '@/api/ne/neHost';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { NE_TYPE_LIST } from '@/constants/ne-constants';
+import { fnToStepName } from '../hooks/useStep';
+import useI18n from '@/hooks/useI18n';
+import useDictStore from '@/store/modules/dict';
+const { getDict } = useDictStore();
+const { t } = useI18n();
+
+/**字典数据 */
+let dict: {
+  /**主机类型 */
+  neHostType: DictType[];
+  /**分组 */
+  neHostGroupId: DictType[];
+  /**认证模式 */
+  neHostAuthMode: DictType[];
+} = reactive({
+  neHostType: [],
+  neHostGroupId: [],
+  neHostAuthMode: [],
+});
+
+/**标签对象信息状态类型 */
+type TabStateType = {
+  /**激活选中 */
+  activeKey: string;
+  /**页签数据 */
+  panes: Record<string, any>[];
+  /**等待loading */
+  confirmLoading: boolean;
+};
+
+/**标签对象信息状态 */
+const tabState: TabStateType = reactive({
+  activeKey: 'neType@neId',
+  panes: [],
+  confirmLoading: false,
+});
+
+/**
+ * 导航标签关闭
+ * @param id 标签的key
+ */
+function fnTabClose(key: string) {
+  // 获取当前项下标
+  const tabIndex = tabState.panes.findIndex(tab => tab.key === key);
+  if (tabIndex === -1) return;
+  const item = tabState.panes[tabIndex];
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: `确认要删除${item.data.neType}@${item.data.neId}网元信息？`,
+    onOk() {
+      delNeInfo(item.data.id).finally(() => {
+        tabState.panes.splice(tabIndex, 1);
+        // 激活前一项标签
+        const idx = tabIndex === 0 ? 0 : tabIndex - 1;
+        tabState.activeKey = tabState.panes[idx].id;
+      });
+    },
+  });
+}
+
+/**新建网元信息 */
+function fnTabCreate() {
+  const neType = 'NE';
+  const neId = '001' + new Date().getMilliseconds();
+  tabState.panes.push({
+    key: `${neType}@${neId}`,
+    data: {
+      id: undefined,
+      neId: neId,
+      neType: neType,
+      neName: '',
+      ip: '',
+      port: 33030,
+      pvFlag: 'PNF',
+      rmUid: `4400HX1${neType}001`,
+      neAddress: '',
+      dn: '',
+      vendorName: '',
+      province: '',
+      // 主机
+      hosts: [
+        {
+          hostId: undefined,
+          hostType: 'ssh',
+          groupId: '1',
+          title: 'SSH_NE_22',
+          addr: '',
+          port: 22,
+          user: 'user',
+          authMode: '2',
+          password: 'user',
+          privateKey: '',
+          passPhrase: '',
+          remark: '',
+        },
+        {
+          hostId: undefined,
+          hostType: 'telnet',
+          groupId: '1',
+          title: 'Telnet_NE_4100',
+          addr: '',
+          port: 4100,
+          user: 'user',
+          authMode: '0',
+          password: 'user',
+          remark: '',
+        },
+      ],
+    },
+    status: false,
+  });
+  tabState.activeKey = `${neType}@${neId}`;
+}
+
+/**
+ * 对话框弹出测试连接
+ */
+function fnModalTest(row: Record<string, any>) {
+  if (tabState.confirmLoading || !row.addr) return;
+  tabState.confirmLoading = true;
+  const hide = message.loading(t('common.loading'), 0);
+  testNeHost(row)
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success({
+          content: `${row.addr}:${row.port} ${t('views.ne.neHost.testOk')}`,
+          duration: 2,
+        });
+      } else {
+        message.error({
+          content: `${row.addr}:${row.port} ${res.msg}`,
+          duration: 2,
+        });
+      }
+    })
+    .finally(() => {
+      hide();
+      tabState.confirmLoading = false;
+    });
+}
+
+/**SSH连接-免密直连 */
+function fnSSHLink(row: Record<string, any>) {
+  if (tabState.confirmLoading) return;
+
+  Modal.confirm({
+    title: '提示',
+    content: '是否要配置免密直连？',
+    onOk: () => {
+      tabState.confirmLoading = true;
+      neHostAuthorizedRSA(row).then(res => {
+        tabState.confirmLoading = false;
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: `操作成功`,
+            duration: 2,
+          });
+        } else {
+          message.error({
+            content: `操作失败`,
+            duration: 2,
+          });
+        }
+      });
+    },
+  });
+}
+
+/**
+ * 表单修改网元类型
+ */
+function fnNeTypeChange(v: any, data: any) {
+  const hostsLen = data.hosts.length;
+  // 网元默认只含22和4100
+  if (hostsLen === 3 && v !== 'UPF') {
+    data.hosts.pop();
+  }
+  // UPF标准版本可支持5002
+  if (hostsLen === 2 && v === 'UPF') {
+    data.hosts.push({
+      hostId: undefined,
+      hostType: 'telnet',
+      groupId: '1',
+      title: 'Telnet_NE_5002',
+      addr: '',
+      port: 5002,
+      user: 'user',
+      authMode: '0',
+      password: 'user',
+      remark: '',
+    });
+  }
+}
+
+/**
+ * 表单修改网元IP
+ */
+function fnNeIPChange(e: any, data: any) {
+  const v = e.target.value;
+  if (v.length < 7) return;
+  for (const host of data.hosts) {
+    host.addr = v;
+  }
+}
+
+/**保存信息 */
+function fnSaveFinish(pane: any) {
+  console.log('Success:', pane);
+  tabState.confirmLoading = true;
+  const from = toRaw(pane);
+  const result = from.id ? updateNeInfo(from) : addNeInfo(from);
+  const hide = message.loading(t('common.loading'), 0);
+  result
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        if (res.data) {
+          pane.id = res.data;
+        }
+        tabState.panes.findIndex;
+
+        const tabItem = tabState.panes.find(
+          tab => tab.key === tabState.activeKey
+        );
+        if (tabItem) {
+          tabItem.status = true;
+        }
+        message.success({
+          content: '操作成功',
+          duration: 3,
+        });
+      } else {
+        const tabItem = tabState.panes.find(
+          tab => tab.key === tabState.activeKey
+        );
+        if (tabItem) {
+          tabItem.status = false;
+        }
+        message.error({
+          content: `${res.msg}`,
+          duration: 3,
+        });
+      }
+    })
+    .finally(() => {
+      hide();
+      tabState.confirmLoading = false;
+    });
+}
+
+/**保存信息有错误的情况 */
+function fnSaveFinishFailed(e: any) {
+  message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+}
+
+/**返回上一步 */
+function fnStepPrev() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: '确认要放弃当前变更返回上一步吗？',
+    onOk() {
+      fnToStepName('ConfigSystem');
+    },
+  });
+}
+
+/**下一步操作 */
+function fnStepNext(stepName: 'ConfigNeInfoPara5G') {
+  if (stepName === 'ConfigNeInfoPara5G') {
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: '确认要下一步进行各网元公共参数的设置？',
+      onOk() {
+        fnToStepName('ConfigNeInfoPara5G');
+      },
+    });
+  }
+}
+
+function fnInit() {
+  listAllNeInfo({
+    bandHost: true,
+  }).then(res => {
+    console.log(res);
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      for (const item of res.data) {
+        tabState.panes.push({
+          key: `${item.neType}@${item.neId}`,
+          data: item,
+          status: false,
+        });
+      }
+      // 选择首个
+      if (tabState.panes.length > 0) {
+        tabState.activeKey = tabState.panes[0].key;
+      }
+    }
+  });
+}
+
+onMounted(() => {
+  // 初始字典数据
+  Promise.allSettled([
+    getDict('ne_host_type'),
+    getDict('ne_host_groupId'),
+    getDict('ne_host_authMode'),
+  ]).then(resArr => {
+    if (resArr[0].status === 'fulfilled') {
+      dict.neHostType = resArr[0].value;
+    }
+    if (resArr[1].status === 'fulfilled') {
+      dict.neHostGroupId = resArr[1].value;
+    }
+    if (resArr[2].status === 'fulfilled') {
+      dict.neHostAuthMode = resArr[2].value;
+    }
+  });
+  fnInit();
+});
+</script>
+
+<template>
+  <div>
+    <h2>配置网元信息</h2>
+
+    <a-tabs
+      class="neinfo-tabs"
+      hide-add
+      tab-position="top"
+      type="editable-card"
+      :tab-bar-gutter="8"
+      :tab-bar-style="{ margin: '0' }"
+      v-model:activeKey="tabState.activeKey"
+      @edit="(key:any) => fnTabClose(key as string)"
+    >
+      <template #rightExtra>
+        <a-space :size="8" align="center">
+          <a-tooltip placement="topRight">
+            <template #title> 新增网元 </template>
+            <a-button type="default" shape="circle" @click="fnTabCreate()">
+              <template #icon><PlusOutlined /></template>
+            </a-button>
+          </a-tooltip>
+        </a-space>
+      </template>
+
+      <a-tab-pane
+        v-for="pane in tabState.panes"
+        :key="pane.key"
+        :closable="tabState.panes.length > 1"
+      >
+        <template #tab>
+          <a-badge
+            :status="pane.status ? 'success' : 'default'"
+            :text="`${pane.data.neType}@${pane.data.neId}`"
+          />
+        </template>
+
+        <!-- {{ pane.data }} -->
+        <a-form
+          :name="pane.key"
+          layout="horizontal"
+          :model="pane.data"
+          :label-col="{ span: 6 }"
+          :labelWrap="true"
+          autocomplete="off"
+          @finish="fnSaveFinish(pane.data)"
+          @finishFailed="fnSaveFinishFailed"
+        >
+          <a-row :gutter="16">
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                :label="t('views.configManage.neManage.neType')"
+                name="neType"
+                :rules="{
+                  required: true,
+                  message: '请输入网元类型',
+                }"
+              >
+                <a-auto-complete
+                  v-model:value="pane.data.neType"
+                  :options="NE_TYPE_LIST.map(v => ({ value: v }))"
+                  @change="v => fnNeTypeChange(v, pane.data)"
+                >
+                  <a-input
+                    allow-clear
+                    :placeholder="t('common.inputPlease')"
+                    :maxlength="32"
+                  >
+                    <template #prefix>
+                      <a-tooltip placement="topLeft">
+                        <template #title>
+                          {{ t('views.configManage.neManage.neTypeTip') }}
+                        </template>
+                        <InfoCircleOutlined
+                          style="color: rgba(0, 0, 0, 0.45)"
+                        />
+                      </a-tooltip>
+                    </template>
+                  </a-input>
+                </a-auto-complete>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                :label="t('views.configManage.neManage.pvflag')"
+                name="pvFlag"
+              >
+                <a-select v-model:value="pane.data.pvFlag" default-value="PNF">
+                  <a-select-opt-group
+                    :label="t('views.configManage.neManage.pnf')"
+                  >
+                    <a-select-option value="PNF">PNF</a-select-option>
+                  </a-select-opt-group>
+                  <a-select-opt-group
+                    :label="t('views.configManage.neManage.vnf')"
+                  >
+                    <a-select-option value="VNF">VNF</a-select-option>
+                  </a-select-opt-group>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                :label="t('views.configManage.neManage.neId')"
+                name="neId"
+                :rules="{
+                  required: true,
+                  message: '请输入网元标识',
+                }"
+              >
+                <a-input
+                  v-model:value="pane.data.neId"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  :maxlength="32"
+                ></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                :label="t('views.configManage.neManage.neName')"
+                name="neName"
+                :rules="{
+                  required: true,
+                  message: '请输入网元名称',
+                }"
+              >
+                <a-input
+                  v-model:value="pane.data.neName"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  :maxlength="64"
+                >
+                </a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                :label="t('views.configManage.neManage.ip')"
+                name="ip"
+                :rules="{
+                  required: true,
+                  message: '请输入网元IP地址',
+                }"
+              >
+                <a-input
+                  v-model:value="pane.data.ip"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  :maxlength="128"
+                  @change="e => fnNeIPChange(e, pane.data)"
+                >
+                  <template #prefix>
+                    <a-tooltip placement="topLeft">
+                      <template #title>
+                        <div>
+                          {{ t('views.ne.neInfo.ipAddr') }}
+                        </div>
+                      </template>
+                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    </a-tooltip>
+                  </template>
+                </a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                :label="t('views.configManage.neManage.port')"
+                name="port"
+                :rules="{
+                  required: true,
+                  message: '请输入网元端口',
+                }"
+              >
+                <a-input-number
+                  v-model:value="pane.data.port"
+                  style="width: 100%"
+                  :min="1"
+                  :max="65535"
+                  placeholder="<=65535"
+                >
+                  <template #prefix>
+                    <a-tooltip placement="topLeft">
+                      <template #title>
+                        <div>
+                          {{ t('views.configManage.neManage.portTip') }}
+                        </div>
+                      </template>
+                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    </a-tooltip>
+                  </template>
+                </a-input-number>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-form-item
+            :label="t('views.configManage.neManage.uid')"
+            name="rmUid"
+            :rules="{
+              required: true,
+              message: '请输入资源唯一标识',
+            }"
+            :label-col="{ span: 3 }"
+            :labelWrap="true"
+          >
+            <a-input
+              v-model:value="pane.data.rmUid"
+              allow-clear
+              :placeholder="t('common.inputPlease')"
+              :maxlength="40"
+            >
+              <template #prefix>
+                <a-tooltip placement="topLeft">
+                  <template #title>
+                    <div>
+                      {{ t('views.ne.neInfo.rmUID') }}
+                    </div>
+                  </template>
+                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                </a-tooltip>
+              </template>
+            </a-input>
+          </a-form-item>
+
+          <a-row :gutter="16">
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                :label="t('views.configManage.neManage.mac')"
+                name="neAddress"
+              >
+                <a-input
+                  v-model:value="pane.data.neAddress"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  :maxlength="64"
+                >
+                  <template #prefix>
+                    <a-tooltip placement="topLeft">
+                      <template #title>
+                        <div>
+                          {{ t('views.configManage.neManage.macTip') }}
+                        </div>
+                      </template>
+                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    </a-tooltip>
+                  </template>
+                </a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                :label="t('views.configManage.neManage.dn')"
+                name="dn"
+              >
+                <a-input
+                  v-model:value="pane.data.dn"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  :maxlength="255"
+                ></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                :label="t('views.configManage.neManage.vendorName')"
+                name="vendorName"
+              >
+                <a-input
+                  v-model:value="pane.data.vendorName"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  :maxlength="64"
+                >
+                </a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                :label="t('views.configManage.neManage.province')"
+                name="province"
+              >
+                <a-input
+                  v-model:value="pane.data.province"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  :maxlength="32"
+                ></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-divider orientation="left">
+            {{ t('views.ne.neInfo.hostConfig') }}
+          </a-divider>
+
+          <!-- 主机连接配置 -->
+          <a-collapse class="collapse" ghost>
+            <a-collapse-panel
+              v-for="host in pane.data.hosts"
+              :key="host.title"
+              :header="`${host.hostType.toUpperCase()} ${host.port}`"
+            >
+              <a-row :gutter="16">
+                <a-col :lg="12" :md="12" :xs="24">
+                  <a-form-item :label="t('views.ne.neHost.addr')">
+                    <a-input
+                      v-model:value="host.addr"
+                      allow-clear
+                      :maxlength="128"
+                      :placeholder="t('common.inputPlease')"
+                    >
+                    </a-input>
+                  </a-form-item>
+                </a-col>
+                <a-col :lg="12" :md="12" :xs="24">
+                  <a-form-item :label="t('views.ne.neHost.port')" name="port">
+                    <a-input-number
+                      v-model:value="host.port"
+                      :min="10"
+                      :max="65535"
+                      :step="1"
+                      style="width: 100%"
+                    ></a-input-number>
+                  </a-form-item>
+                </a-col>
+              </a-row>
+
+              <a-row :gutter="16">
+                <a-col :lg="12" :md="12" :xs="24">
+                  <a-form-item :label="t('views.ne.neHost.user')">
+                    <a-input
+                      v-model:value="host.user"
+                      allow-clear
+                      :maxlength="50"
+                      :placeholder="t('common.inputPlease')"
+                    >
+                    </a-input>
+                  </a-form-item>
+                </a-col>
+                <a-col :lg="12" :md="12" :xs="24">
+                  <a-form-item :label="t('views.ne.neHost.authMode')">
+                    <a-select
+                      v-model:value="host.authMode"
+                      default-value="0"
+                      :options="dict.neHostAuthMode"
+                      :disabled="host.hostType === 'telnet'"
+                    >
+                    </a-select>
+                  </a-form-item>
+                </a-col>
+              </a-row>
+
+              <a-form-item
+                v-if="host.authMode === '0'"
+                :label="t('views.ne.neHost.password')"
+                :label-col="{ span: 3 }"
+                :label-wrap="true"
+              >
+                <a-input-password
+                  v-model:value="host.password"
+                  :maxlength="128"
+                  :placeholder="t('common.inputPlease')"
+                >
+                </a-input-password>
+              </a-form-item>
+
+              <template v-if="host.authMode === '1'">
+                <a-form-item
+                  :label="t('views.ne.neHost.privateKey')"
+                  :label-col="{ span: 3 }"
+                  :label-wrap="true"
+                >
+                  <a-textarea
+                    v-model:value="host.privateKey"
+                    :auto-size="{ minRows: 4, maxRows: 6 }"
+                    :maxlength="3000"
+                    :show-count="true"
+                    :placeholder="t('views.ne.neHost.privateKeyPlease')"
+                  />
+                </a-form-item>
+
+                <a-form-item
+                  :label="t('views.ne.neHost.passPhrase')"
+                  :label-col="{ span: 3 }"
+                  :label-wrap="true"
+                >
+                  <a-input-password
+                    v-model:value="host.passPhrase"
+                    :maxlength="128"
+                    :placeholder="t('common.inputPlease')"
+                  >
+                  </a-input-password>
+                </a-form-item>
+              </template>
+
+              <a-form-item
+                :label="t('views.ne.neHost.remark')"
+                :label-col="{ span: 3 }"
+                :label-wrap="true"
+              >
+                <a-textarea
+                  v-model:value="host.remark"
+                  :auto-size="{ minRows: 1, maxRows: 6 }"
+                  :maxlength="450"
+                  :show-count="true"
+                  :placeholder="t('common.inputPlease')"
+                />
+              </a-form-item>
+
+              <a-form-item
+                :label="t('views.ne.neHost.test')"
+                name="test"
+                :label-col="{ span: 3 }"
+                :label-wrap="true"
+              >
+                <a-button
+                  type="primary"
+                  shape="round"
+                  @click="fnModalTest(host)"
+                  :loading="tabState.confirmLoading"
+                >
+                  <template #icon><LinkOutlined /></template>
+                </a-button>
+
+                <a-button
+                  type="link"
+                  @click="fnSSHLink(host)"
+                  :loading="tabState.confirmLoading"
+                  v-if="host.hostType === 'ssh' && host.authMode !== '2'"
+                >
+                  <template #icon><LinkOutlined /></template>
+                  免密授权
+                </a-button>
+              </a-form-item>
+            </a-collapse-panel>
+          </a-collapse>
+
+          <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
+            <a-button
+              type="primary"
+              html-type="submit"
+              :loading="tabState.confirmLoading"
+            >
+              保存信息
+            </a-button>
+          </a-form-item>
+        </a-form>
+      </a-tab-pane>
+    </a-tabs>
+
+    <div>
+      <a-space direction="horizontal" :size="18">
+        <a-button @click="fnStepPrev()"> 上一步 </a-button>
+
+        <a-button type="dashed" @click="fnStepNext('ConfigNeInfoPara5G')">
+          下一步
+        </a-button>
+      </a-space>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.neinfo-tabs :deep(.ant-tabs-tabpane) {
+  height: 72vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  margin-bottom: 24px;
+  margin-top: 24px;
+}
+</style>

src/views/system/quick-start/components/ConfigNeInfoPara5G.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { Modal, message } from 'ant-design-vue/lib';
+import { onMounted, reactive, toRaw } from 'vue';
+import { fnToStepName } from '../hooks/useStep';
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
+
+/**对象信息信息状态类型 */
+type StateType = {
+  /**保存选择同步到网元窗 */
+  visible: boolean;
+  /**网元选择 */
+  neSelectOtions: any[];
+  /**同步到网元 */
+  sync: boolean;
+  syncNe: string[];
+  syncMsg: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**对象信息状态 */
+let state: StateType = reactive({
+  visible: false,
+  neSelectOtions: [],
+  sync: false,
+  syncNe: [],
+  syncMsg: '',
+  from: {
+    basic: {
+      dnn_data: 'internet',
+      dnn_ims: 'ims',
+      oamEnable: true,
+      plmnId: {
+        mcc: '001',
+        mnc: '01',
+      },
+      snmpEnable: false,
+      snssai: {
+        sd: '000001',
+        sst: '1',
+      },
+      tac: 4388,
+    },
+    external: {
+      amfn2_ip: '192.168.8.120',
+      ue_pool: '10.2.1.0/24',
+      upfn3_gw: '192.168.1.1',
+      upfn3_ip: '192.168.8.190/24',
+      upfn6_gw: '192.168.1.1',
+      upfn6_ip: '192.168.8.191/24',
+    },
+  },
+  confirmLoading: false,
+});
+
+/**返回上一步 */
+function fnStepPrev() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: '确认要放弃当前变更返回上一步吗？',
+    onOk() {
+      fnToStepName('ConfigNeInfo');
+    },
+  });
+}
+
+/**下一步操作 */
+function fnStepNext(stepName: 'ConfigNeInfoPara5G') {
+  if (stepName === 'ConfigNeInfoPara5G') {
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: '确认要下一步进行各网元安装吗？',
+      onOk() {
+        fnToStepName('SoftwareInstall');
+      },
+    });
+  }
+}
+</script>
+
+<template>
+  <div>
+    <h2>网元公共参数设置</h2>
+
+    <a-form
+      name="syncNeModal"
+      layout="horizontal"
+      :label-col="{ span: 5 }"
+      :label-wrap="true"
+    >
+      <a-form-item label="Sync To NE" name="sync">
+        <a-switch
+          :checked-children="t('common.switch.open')"
+          :un-checked-children="t('common.switch.shut')"
+          v-model:checked="state.sync"
+          :disabled="state.confirmLoading"
+        ></a-switch>
+      </a-form-item>
+      <a-form-item label="Select NE" name="syncNe" v-if="state.sync">
+        <a-select
+          v-model:value="state.syncNe"
+          mode="multiple"
+          :placeholder="t('common.selectPlease')"
+          :max-tag-count="3"
+          :options="state.neSelectOtions"
+        >
+          <template #maxTagPlaceholder="omittedValues">
+            <span>+ {{ omittedValues.length }} ...</span>
+          </template>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="Sync Msg" name="syncMsg" v-if="state.syncMsg">
+        <a-textarea
+          :disabled="true"
+          :value="state.syncMsg"
+          :auto-size="{ minRows: 2, maxRows: 8 }"
+          style="background-color: transparent; color: rgba(0, 0, 0, 0.85)"
+        />
+      </a-form-item>
+    </a-form>
+
+    <div>
+      <a-space direction="horizontal" :size="18">
+        <a-button @click="fnStepPrev()"> 上一步 </a-button>
+
+        <a-button type="dashed" @click="fnStepNext('ConfigNeInfoPara5G')">
+          下一步
+        </a-button>
+      </a-space>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped></style>

src/views/system/quick-start/components/ConfigSystem.vue

@@ -0,0 +1,324 @@
+<script setup lang="ts">
+import { fnToStepName } from '../hooks/useStep';
+import { useRouter } from 'vue-router';
+import useI18n from '@/hooks/useI18n';
+import { reactive } from 'vue';
+import useAppStore from '@/store/modules/app';
+import { parseUrlPath } from '@/plugins/file-static-url';
+import { Modal, message } from 'ant-design-vue/lib';
+import { transferStaticFile, uploadFile } from '@/api/tool/file';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { sessionGet } from '@/utils/cache-session-utils';
+import { FileType } from 'ant-design-vue/lib/upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import { changeValue } from '@/api/system/config';
+const { t, currentLocale } = useI18n();
+const router = useRouter();
+const appStore = useAppStore();
+
+type StateType = {
+  confirmLoading: boolean;
+  /**图片 */
+  filePath: string; // 是否上传文件
+  type: 'brand' | 'icon';
+  icon: string;
+  brand: string;
+  /**系统名称 */
+  title: string;
+  titleOld: string;
+  /**国际化切换 */
+  open: boolean;
+  openOld: boolean;
+};
+
+const state: StateType = reactive({
+  confirmLoading: false,
+  filePath: '',
+  type: 'icon',
+  icon: getLogoURL('icon'),
+  brand: getLogoURL('brand'),
+  title: appStore.appName,
+  titleOld: appStore.appName,
+  open: appStore.i18nOpen,
+  openOld: appStore.i18nOpen,
+});
+
+// LOGO地址
+function getLogoURL(type: 'brand' | 'icon') {
+  let url =
+    type === 'brand'
+      ? parseUrlPath(appStore.filePathBrand)
+      : parseUrlPath(appStore.filePathIcon);
+  if (url.indexOf('{language}') === -1) {
+    return url;
+  }
+  // 语言参数替换
+  const local = currentLocale.value;
+  const lang = local.split('_')[0];
+  return url.replace('{language}', lang || 'en');
+}
+
+/**上传前检查或转换压缩 */
+function fnBeforeUpload(file: FileType) {
+  if (state.confirmLoading) return false;
+  const isJpgOrPng = ['image/jpeg', 'image/png'].includes(file.type);
+  if (!isJpgOrPng) {
+    message.error(
+      t('views.system.setting.uploadFormat', { format: 'jpg、png' }),
+      3
+    );
+  }
+  const isLt2M = file.size / 1024 / 1024 < 2;
+  if (!isLt2M) {
+    message.error(t('views.system.setting.uploadSize', { size: 2 }), 3);
+  }
+  return isJpgOrPng && isLt2M;
+}
+
+/**上传变更 */
+function fnUpload(up: UploadRequestOption) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.system.setting.sysLogoTipContentUpload'),
+    onOk() {
+      // 发送请求
+      const hide = message.loading(t('common.loading'), 0);
+      state.confirmLoading = true;
+      let formData = new FormData();
+      formData.append('file', up.file);
+      formData.append('subPath', 'default');
+      uploadFile(formData).then(res => {
+        state.confirmLoading = false;
+        hide();
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success(t('views.system.setting.uploadSuccess'), 3);
+          state.filePath = res.data.fileName;
+          // 兼容旧前端可改配置文件
+          const baseUrl = import.meta.env.PROD
+            ? sessionGet('baseUrl') || import.meta.env.VITE_API_BASE_URL
+            : import.meta.env.VITE_API_BASE_URL;
+          if (state.type === 'icon') {
+            state.icon = `${baseUrl}${res.data.fileName}`;
+          }
+          if (state.type === 'brand') {
+            state.brand = `${baseUrl}${res.data.fileName}`;
+          }
+        } else {
+          message.error(res.msg, 3);
+        }
+      });
+    },
+  });
+}
+
+/**保存信息 */
+function fnSave() {
+  const language = currentLocale.value;
+  const reqArr = [changeValue({ key: 'sys.logo.type', value: state.type })];
+  // 改变LOGO地址
+  if (state.filePath) {
+    let changeFilePath = appStore.filePathIcon;
+    if (state.type === 'brand') {
+      changeFilePath = appStore.filePathBrand;
+    }
+    reqArr.push(
+      transferStaticFile({
+        language: language,
+        uploadPath: state.filePath,
+        staticPath: changeFilePath,
+      })
+    );
+  }
+  // 改变系统名称
+  if (state.title !== state.titleOld) {
+    reqArr.push(changeValue({ key: 'sys.title', value: state.title }));
+  }
+  // 改变语言切换
+  if (state.open !== state.openOld) {
+    reqArr.push(changeValue({ key: 'sys.i18n.open', value: `${state.open}` }));
+    reqArr.push(changeValue({ key: 'sys.i18n.default', value: `${language}` }));
+  }
+
+  // 发送保存
+  state.confirmLoading = true;
+  Promise.all(reqArr).then(resArr => {
+    console.log(resArr);
+    message.success('保存成功！');
+    state.confirmLoading = false;
+  });
+}
+
+/**返回上一步 */
+function fnStepPrev() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: '确认要返回上一步吗？',
+    onOk() {
+      fnToStepName('Start');
+    },
+  });
+}
+
+/**下一步操作 */
+function fnStepNext(stepName: 'ConfigNeInfo' | 'Done') {
+  if (stepName === 'ConfigNeInfo') {
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: '确认要进行网元快速安装吗？',
+      onOk() {
+        fnToStepName('ConfigNeInfo');
+      },
+    });
+  }
+  if (stepName === 'Done') {
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: '确认要直接使用核心网管理平台吗？',
+      onOk() {
+        fnToStepName('Done');
+      },
+    });
+  }
+}
+</script>
+
+<template>
+  <div>
+    <h2>系统配置</h2>
+
+    <a-form
+      :label-col="{ span: 3 }"
+      :label-wrap="true"
+      :wrapper-col="{ span: 16 }"
+    >
+      <a-form-item
+        label="系统LOGO"
+        help="将整张图片展示到系统LOGO区域，请使用透明背景，尺寸比例适应区域大小"
+      >
+        <a-space direction="horizontal" :size="18">
+          <a-radio-group v-model:value="state.type" button-style="solid">
+            <a-radio value="brand">
+              {{ t('views.system.setting.sysLogoBrand') }}
+            </a-radio>
+            <a-radio value="icon">
+              {{ t('views.system.setting.sysLogoIcon') }}
+            </a-radio>
+          </a-radio-group>
+          <a-upload
+            name="file"
+            list-type="picture"
+            accept=".jpg,.png"
+            :max-count="1"
+            :show-upload-list="false"
+            :before-upload="fnBeforeUpload"
+            :custom-request="fnUpload"
+          >
+            <a-button type="link" :loading="state.confirmLoading">
+              {{ t('views.system.setting.sysLogoUpload') }}
+            </a-button>
+          </a-upload>
+        </a-space>
+        <div class="header">
+          <div class="header-brand" v-show="state.type === 'brand'">
+            <img :width="174" :height="48" :src="state.brand" />
+          </div>
+          <div class="header-icon" v-show="state.type === 'icon'">
+            <img :src="state.icon" />
+            <h1 :title="state.title">
+              {{ state.title }}
+            </h1>
+          </div>
+          <div class="header-menu">
+            <IconFont type="icon-pcduan" style="margin-right: 10px"></IconFont>
+            {{ t('router.index') }}
+          </div>
+        </div>
+      </a-form-item>
+
+      <a-form-item label="系统名称" help="系统名称限制20个字符长度">
+        <a-input
+          v-model:value="state.title"
+          allow-clear
+          :maxlength="20"
+          :placeholder="t('common.inputPlease')"
+        ></a-input>
+      </a-form-item>
+
+      <a-form-item
+        label="国际化切换"
+        help="进入系统后是否显示国际化切换，默认锁定当前语言"
+      >
+        <a-switch
+          :checked-children="t('common.switch.open')"
+          :un-checked-children="t('common.switch.shut')"
+          v-model:checked="state.open"
+        ></a-switch>
+      </a-form-item>
+    </a-form>
+
+    <div>
+      <a-space direction="horizontal" :size="18">
+        <a-button @click="fnStepPrev()"> 上一步 </a-button>
+        <a-button type="primary" :loading="state.confirmLoading" @click="fnSave()">
+          保存信息
+        </a-button>
+        <a-button type="dashed" @click="fnStepNext('ConfigNeInfo')">
+          安装网元
+        </a-button>
+        <a-button type="ghost" @click="fnStepNext('Done')"> 直接使用 </a-button>
+      </a-space>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.header {
+  display: flex;
+  align-content: center;
+  height: 48px;
+  padding-left: 16px;
+  background-color: #001529;
+
+  &-brand {
+    width: 174px;
+    height: 48px;
+    margin-right: 12px;
+    border: 1px var(--ant-primary-color) solid;
+  }
+  &-icon {
+    display: flex;
+    align-content: center;
+    min-width: 174px;
+    height: 100%;
+    align-items: center;
+    margin-right: 16px;
+    border: 1px var(--ant-primary-color) solid;
+
+    & > img {
+      height: 32px;
+      width: 32px;
+      vertical-align: middle;
+      border-style: none;
+      border-radius: 6.66px;
+    }
+    & > h1 {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 130px;
+      color: #fff;
+      margin: 0 0 0 12px;
+      font-weight: 600;
+      font-size: 16px;
+    }
+  }
+
+  &-menu {
+    width: 90px;
+    line-height: 40px;
+    color: #ffffff;
+    align-self: center;
+    text-align: center;
+  }
+}
+</style>

src/views/system/quick-start/components/Done.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { guideDone } from '@/api';
+import { stepState, fnStepNext, fnStepPrev } from '../hooks/useStep';
+import { message, Form, Modal } from 'ant-design-vue/lib';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { removeToken } from '@/plugins/auth-token';
+import { useRouter } from 'vue-router';
+import useAppStore from '@/store/modules/app';
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
+const router = useRouter();
+
+/**引导完成 */
+function fnGuideDone() {
+  guideDone()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        removeToken();
+        useAppStore().sysGuide = false;
+      }
+    })
+    .finally(() => {
+      router.push({ name: 'Login' });
+    });
+}
+</script>
+
+<template>
+  <div>
+    <div>结束</div>
+    <p>安装网元会有：网元信息-授权有效期</p>
+    =======提示
+    <p>未配置相关网元，请进入系统后，根据情况单独安装网元</p>
+
+    <a-button type="primary" @click="fnGuideDone()"> 开始使用 </a-button>
+  </div>
+</template>
+
+<style lang="less" scoped></style>

src/views/system/quick-start/components/SoftwareInstall.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { stepState, fnToStepName } from '../hooks/useStep';
+</script>
+
+<template>
+  <div>
+    <div>软件安装</div>
+    <a-button 
+      style="margin-left: 8px"
+      @click="fnToStepName('ConfigNeInfoPara5G')"
+    >
+      上一步
+    </a-button>
+    <a-button type="primary" @click="fnToStepName('SoftwareLicense')">
+      下一步
+    </a-button>
+  </div>
+</template>
+
+<style lang="less" scoped></style>

src/views/system/quick-start/components/SoftwareLicense.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { stepState, fnToStepName, fnStepPrev } from '../hooks/useStep';
+</script>
+
+<template>
+  <div>
+    <div>软件授权激活</div>
+    <a-button style="margin-left: 8px" @click="fnToStepName('SoftwareInstall')">
+      上一步
+    </a-button>
+    <a-button type="primary" @click="fnToStepName('Done')"> 结束 </a-button>
+  </div>
+</template>
+
+<style lang="less" scoped></style>

src/views/system/quick-start/components/Start.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { onMounted, reactive } from 'vue';
+import { fnToStepName } from '../hooks/useStep';
+import { guideStart } from '@/api';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { TOKEN_RESPONSE_FIELD } from '@/constants/token-constants';
+import { getToken, setToken } from '@/plugins/auth-token';
+import { Modal, message } from 'ant-design-vue/lib';
+import { useRouter } from 'vue-router';
+import useI18n from '@/hooks/useI18n';
+const { t, changeLocale, optionsLocale } = useI18n();
+const router = useRouter();
+
+const state = reactive({
+  copyright: ` `,
+});
+
+/**引导开始 */
+function fnGuideStart() {
+  if (getToken()) return;
+  guideStart().then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && res.data) {
+      const token = res.data[TOKEN_RESPONSE_FIELD];
+      setToken(token);
+    } else {
+      router.push({ name: 'Login' });
+    }
+  });
+}
+
+onMounted(() => {
+  fnGuideStart();
+});
+</script>
+
+<template>
+  <div>
+    <div>欢迎使用 {{ t('hello') }}</div>
+    <div>
+      语言切换：
+
+      <a-dropdown trigger="click">
+        <a-button size="small" type="default">
+          {{ t('i18n') }}
+          <DownOutlined />
+        </a-button>
+        <template #overlay>
+          <a-menu @click="(e:any)=> changeLocale(e.key)">
+            <a-menu-item v-for="opt in optionsLocale" :key="opt.value">
+              {{ opt.label }}
+            </a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+    </div>
+    ====
+    <div>软件声明:</div>
+    <div>1. 网管配置，网元安装可选</div>
+    <div>2. 可选项，网元安装</div>
+
+    <a-button type="primary" @click="fnToStepName('ConfigSystem')">
+      开始
+    </a-button>
+  </div>
+</template>
+
+<style lang="less" scoped></style>