style: 调整前端示例组件相关目录结构

continew-admin-ui/src/views/demo/profile/basic/components/operation-log.vue

@@ -0,0 +1,77 @@
+<template>
+  <a-card class="general-card">
+    <template #title>
+      {{ $t('basicProfile.title.operationLog') }}
+    </template>
+    <a-spin :loading="loading" style="width: 100%">
+      <a-table :data="renderData">
+        <template #columns>
+          <a-table-column
+            :title="$t('basicProfile.column.contentNumber')"
+            data-index="contentNumber"
+          />
+          <a-table-column
+            :title="$t('basicProfile.column.updateContent')"
+            data-index="updateContent"
+          />
+          <a-table-column
+            :title="$t('basicProfile.column.status')"
+            data-index="status"
+          >
+            <template #cell="{ record }">
+              <p v-if="record.status === 0">
+                <span class="circle"></span>
+                <span>{{ $t('basicProfile.cell.auditing') }}</span>
+              </p>
+              <p v-if="record.status === 1">
+                <span class="circle pass"></span>
+                <span>{{ $t('basicProfile.cell.pass') }}</span>
+              </p>
+            </template>
+          </a-table-column>
+          <a-table-column
+            :title="$t('basicProfile.column.updateTime')"
+            data-index="updateTime"
+          />
+          <a-table-column :title="$t('basicProfile.column.operation')">
+            <template #cell>
+              <a-button type="text">{{
+                $t('basicProfile.cell.view')
+              }}</a-button>
+            </template>
+          </a-table-column>
+        </template>
+      </a-table>
+    </a-spin>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { queryOperationLog, operationLogRes } from '@/api/demo/profile';
+  import useLoading from '@/hooks/loading';
+
+  const { loading, setLoading } = useLoading(true);
+  const renderData = ref<operationLogRes>([]);
+  const fetchData = async () => {
+    try {
+      const { data } = await queryOperationLog();
+      renderData.value = data;
+    } catch (err) {
+      // you can report use errorHandler or other
+    } finally {
+      setLoading(false);
+    }
+  };
+  fetchData();
+</script>
+
+<style scoped lang="less">
+  :deep(.arco-table-th) {
+    &:last-child {
+      .arco-table-th-item-title {
+        margin-left: 16px;
+      }
+    }
+  }
+</style>

continew-admin-ui/src/views/demo/profile/basic/components/profile-item.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="item-container">
+    <a-space :size="16" direction="vertical" fill>
+      <a-descriptions
+        v-for="(item, idx) in blockDataList"
+        :key="idx"
+        :label-style="{
+          textAlign: 'right',
+          width: '200px',
+          paddingRight: '10px',
+          color: 'rgb(var(--gray-8))',
+        }"
+        :value-style="{ width: '400px' }"
+        :title="item.title"
+        :data="item.data"
+      >
+        <template #value="{ value }">
+          <a-skeleton v-if="loading" :animation="true">
+            <a-skeleton-line :widths="['200px']" :rows="1" />
+          </a-skeleton>
+          <span v-else>{{ value }}</span>
+        </template>
+      </a-descriptions>
+    </a-space>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, PropType } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { ProfileBasicRes } from '@/api/demo/profile';
+
+  type BlockList = {
+    title: string;
+    data: {
+      label: string;
+      value: string;
+    }[];
+  }[];
+
+  const props = defineProps({
+    type: {
+      type: String,
+      default: '',
+    },
+    renderData: {
+      type: Object as PropType<ProfileBasicRes>,
+      required: true,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  });
+  const { t } = useI18n();
+  const blockDataList = computed<BlockList>(() => {
+    const { renderData } = props;
+    const result = [];
+    result.push({
+      title:
+        props.type === 'pre'
+          ? t('basicProfile.title.preVideo')
+          : t('basicProfile.title.video'),
+      data: [
+        {
+          label: t('basicProfile.label.video.mode'),
+          value: renderData?.video?.mode || '-',
+        },
+        {
+          label: t('basicProfile.label.video.acquisition.resolution'),
+          value: renderData?.video?.acquisition.resolution || '-',
+        },
+        {
+          label: t('basicProfile.label.video.acquisition.frameRate'),
+          value: `${renderData?.video?.acquisition.frameRate || '-'} fps`,
+        },
+        {
+          label: t('basicProfile.label.video.encoding.resolution'),
+          value: renderData?.video?.encoding.resolution || '-',
+        },
+        {
+          label: t('basicProfile.label.video.encoding.rate.min'),
+          value: `${renderData?.video?.encoding.rate.min || '-'} bps`,
+        },
+        {
+          label: t('basicProfile.label.video.encoding.rate.max'),
+          value: `${renderData?.video?.encoding.rate.max || '-'} bps`,
+        },
+        {
+          label: t('basicProfile.label.video.encoding.rate.default'),
+          value: `${renderData?.video?.encoding.rate.default || '-'} bps`,
+        },
+        {
+          label: t('basicProfile.label.video.encoding.frameRate'),
+          value: `${renderData?.video?.encoding.frameRate || '-'} fpx`,
+        },
+        {
+          label: t('basicProfile.label.video.encoding.profile'),
+          value: renderData?.video?.encoding.profile || '-',
+        },
+      ],
+    });
+
+    result.push({
+      title:
+        props.type === 'pre'
+          ? t('basicProfile.title.preAudio')
+          : t('basicProfile.title.audio'),
+      data: [
+        {
+          label: t('basicProfile.label.audio.mode'),
+          value: renderData?.audio?.mode || '-',
+        },
+        {
+          label: t('basicProfile.label.audio.acquisition.channels'),
+          value: `${renderData?.audio?.acquisition.channels || '-'} ${t(
+            'basicProfile.unit.audio.channels'
+          )}`,
+        },
+        {
+          label: t('basicProfile.label.audio.encoding.channels'),
+          value: `${renderData?.audio?.encoding.channels || '-'} ${t(
+            'basicProfile.unit.audio.channels'
+          )}`,
+        },
+        {
+          label: t('basicProfile.label.audio.encoding.rate'),
+          value: `${renderData?.audio?.encoding.rate || '-'} kbps`,
+        },
+        {
+          label: t('basicProfile.label.audio.encoding.profile'),
+          value: renderData?.audio?.encoding.profile || '-',
+        },
+      ],
+    });
+
+    return result;
+  });
+</script>
+
+<style scoped lang="less">
+  .item-container {
+    padding-top: 20px;
+    :deep(.arco-descriptions-item-label) {
+      font-weight: normal;
+    }
+  }
+</style>

continew-admin-ui/src/views/demo/profile/basic/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="container">
+    <Breadcrumb :items="['menu.profile', 'menu.profile.basic']" />
+    <a-space direction="vertical" :size="16" fill>
+      <a-card class="general-card" :title="$t('basicProfile.title.form')">
+        <template #extra>
+          <a-space>
+            <a-button>{{ $t('basicProfile.cancel') }}</a-button>
+            <a-button type="primary">
+              {{ $t('basicProfile.goBack') }}
+            </a-button>
+          </a-space>
+        </template>
+        <a-steps v-model:current="step" line-less class="steps">
+          <a-step>{{ $t('basicProfile.steps.commit') }}</a-step>
+          <a-step>{{ $t('basicProfile.steps.approval') }}</a-step>
+          <a-step>{{ $t('basicProfile.steps.finish') }}</a-step>
+        </a-steps>
+      </a-card>
+      <a-card class="general-card">
+        <ProfileItem :loading="loading" :render-data="currentData" />
+      </a-card>
+      <a-card class="general-card">
+        <ProfileItem :loading="preLoading" type="pre" :render-data="preData" />
+      </a-card>
+      <OperationLog />
+    </a-space>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import { queryProfileBasic, ProfileBasicRes } from '@/api/demo/profile';
+  import ProfileItem from './components/profile-item.vue';
+  import OperationLog from './components/operation-log.vue';
+
+  const { loading, setLoading } = useLoading(true);
+  const { loading: preLoading, setLoading: preSetLoading } = useLoading(true);
+  const currentData = ref<ProfileBasicRes>({} as ProfileBasicRes);
+  const preData = ref<ProfileBasicRes>({} as ProfileBasicRes);
+  const step = ref(1);
+  const fetchCurrentData = async () => {
+    try {
+      const { data } = await queryProfileBasic();
+      currentData.value = data;
+      step.value = 2;
+    } catch (err) {
+      // you can report use errorHandler or other
+    } finally {
+      setLoading(false);
+    }
+  };
+  const fetchPreData = async () => {
+    try {
+      const { data } = await queryProfileBasic();
+      preData.value = data;
+    } catch (err) {
+      // you can report use errorHandler or other
+    } finally {
+      preSetLoading(false);
+    }
+  };
+  fetchCurrentData();
+  fetchPreData();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Basic',
+  };
+</script>
+
+<style scoped lang="less">
+  .container {
+    padding: 0 20px 20px 20px;
+  }
+
+  .steps {
+    max-width: 548px;
+    margin: 0 auto 10px;
+  }
+</style>

continew-admin-ui/src/views/demo/profile/basic/locale/en-US.ts

@@ -0,0 +1,39 @@
+export default {
+  'menu.profile.basic': 'Basic Profile',
+  'basicProfile.title.form': 'Parameter Approval Process Table',
+  'basicProfile.steps.commit': 'Commit',
+  'basicProfile.steps.approval': 'Approval',
+  'basicProfile.steps.finish': 'Finish',
+  'basicProfile.title.currentParams': 'Current Parameters',
+  'basicProfile.title.originParams': 'Original Parameters',
+  'basicProfile.title.video': 'Video Parameters',
+  'basicProfile.title.audio': 'Audio Parameters',
+  'basicProfile.title.preVideo': 'Original video parameters',
+  'basicProfile.title.preAudio': 'Original audio parameters',
+  'basicProfile.label.video.mode': 'Match Mode',
+  'basicProfile.label.video.acquisition.resolution': 'Acquisition Resolution',
+  'basicProfile.label.video.acquisition.frameRate': 'Acquisition Frame Rate',
+  'basicProfile.label.video.encoding.resolution': 'Encoding Resolution',
+  'basicProfile.label.video.encoding.rate.min': 'Encoding Min Rate',
+  'basicProfile.label.video.encoding.rate.max': 'Encoding Max Rate',
+  'basicProfile.label.video.encoding.rate.default': 'Encoding Default Rate',
+  'basicProfile.label.video.encoding.frameRate': 'Encoding Frame Rate',
+  'basicProfile.label.video.encoding.profile': 'Encoding Profile',
+  'basicProfile.label.audio.mode': 'Match Mode',
+  'basicProfile.label.audio.acquisition.channels': 'Acquisition Channels',
+  'basicProfile.label.audio.encoding.channels': 'Encoding Channels',
+  'basicProfile.label.audio.encoding.rate': 'Encoding Rate',
+  'basicProfile.label.audio.encoding.profile': 'Encoding Profile',
+  'basicProfile.unit.audio.channels': 'channels',
+  'basicProfile.goBack': 'GoBack',
+  'basicProfile.cancel': 'Cancel Process',
+  'basicProfile.title.operationLog': 'Operation Log',
+  'basicProfile.column.contentNumber': 'Content Number',
+  'basicProfile.column.updateContent': 'Update Content',
+  'basicProfile.column.status': 'Status',
+  'basicProfile.column.updateTime': 'Update Time',
+  'basicProfile.column.operation': 'Operation',
+  'basicProfile.cell.pass': 'Pass',
+  'basicProfile.cell.auditing': 'Auditing',
+  'basicProfile.cell.view': 'View',
+};

continew-admin-ui/src/views/demo/profile/basic/locale/zh-CN.ts

@@ -0,0 +1,39 @@
+export default {
+  'menu.profile.basic': '基础详情页',
+  'basicProfile.title.form': '参数审批流程表',
+  'basicProfile.steps.commit': '提交修改',
+  'basicProfile.steps.approval': '审批中',
+  'basicProfile.steps.finish': '修改完成',
+  'basicProfile.title.currentParams': '修改后参数',
+  'basicProfile.title.originParams': '原参数',
+  'basicProfile.title.video': '现视频参数',
+  'basicProfile.title.preVideo': '原视频参数',
+  'basicProfile.title.audio': '现音频参数',
+  'basicProfile.title.preAudio': '原音频参数',
+  'basicProfile.label.video.mode': '匹配模式',
+  'basicProfile.label.video.acquisition.resolution': '采集分辨率',
+  'basicProfile.label.video.acquisition.frameRate': '采集帧率',
+  'basicProfile.label.video.encoding.resolution': '编码分辨率',
+  'basicProfile.label.video.encoding.rate.min': '编码码率最小值',
+  'basicProfile.label.video.encoding.rate.max': '编码码率最大值',
+  'basicProfile.label.video.encoding.rate.default': '编码码率默认值',
+  'basicProfile.label.video.encoding.frameRate': '编码帧率',
+  'basicProfile.label.video.encoding.profile': '编码profile',
+  'basicProfile.label.audio.mode': '匹配模式',
+  'basicProfile.label.audio.acquisition.channels': '采集声道数',
+  'basicProfile.label.audio.encoding.channels': '编码声道数',
+  'basicProfile.label.audio.encoding.rate': '编码码率',
+  'basicProfile.label.audio.encoding.profile': '编码 profile',
+  'basicProfile.unit.audio.channels': '声道',
+  'basicProfile.goBack': '返回',
+  'basicProfile.cancel': '取消流程',
+  'basicProfile.title.operationLog': '参数调整记录',
+  'basicProfile.column.contentNumber': '内容编号',
+  'basicProfile.column.updateContent': '调整内容',
+  'basicProfile.column.status': '当前状态',
+  'basicProfile.column.updateTime': '修改时间',
+  'basicProfile.column.operation': '操作',
+  'basicProfile.cell.pass': '已通过',
+  'basicProfile.cell.auditing': '审核中',
+  'basicProfile.cell.view': '查看',
+};

continew-admin-ui/src/views/demo/profile/basic/mock.ts

@@ -0,0 +1,58 @@
+import Mock from 'mockjs';
+import setupMock, { successResponseWrap } from '@/utils/setup-mock';
+
+setupMock({
+  setup() {
+    Mock.mock(new RegExp('/api/profile/basic'), () => {
+      return successResponseWrap({
+        status: 2,
+        video: {
+          mode: '自定义',
+          acquisition: {
+            resolution: '720*1280',
+            frameRate: 15,
+          },
+          encoding: {
+            resolution: '720*1280',
+            rate: {
+              min: 300,
+              max: 800,
+              default: 1500,
+            },
+            frameRate: 15,
+            profile: 'high',
+          },
+        },
+        audio: {
+          mode: '自定义',
+          acquisition: {
+            channels: 8,
+          },
+          encoding: {
+            channels: 8,
+            rate: 128,
+            profile: 'ACC-LC',
+          },
+        },
+      });
+    });
+    Mock.mock(new RegExp('/api/operation/log'), () => {
+      return successResponseWrap([
+        {
+          key: '1',
+          contentNumber: '视频类001003',
+          updateContent: '视频参数变更',
+          status: 0,
+          updateTime: '2021-02-28 10:30:50',
+        },
+        {
+          key: '2',
+          contentNumber: '视频类058212',
+          updateContent: '视频参数变更；音频参数变更',
+          status: 1,
+          updateTime: '2020-05-13 08:00:00',
+        },
+      ]);
+    });
+  },
+});