|
|
@@ -2,105 +2,157 @@
|
|
|
<div class="d-flex fullscreen" v-loading="loading">
|
|
|
<v-card class="width-auto fullHeight">
|
|
|
<v-banner single-line>
|
|
|
- <div class="py-2 title">流程定义</div>
|
|
|
+ <div class="py-2 title">数据生产线定义</div>
|
|
|
</v-banner>
|
|
|
- <div class="pa-3 overflow-y-auto" style="height: calc(100% - 65px);">
|
|
|
- <div class="mb-3">
|
|
|
- <div v-for="value in ['source_table', 'target_table']" :key="value">
|
|
|
- <div style="color: rgba(0, 0, 0, 0.6); padding: 5px; font-size: 14px;">
|
|
|
- 请选择{{ value === 'source_table' ? '数据输入' : '数据输出' }}
|
|
|
+ <div class="pa-4 overflow-y-auto" style="height: calc(100% - 65px);">
|
|
|
+ <v-alert type="info" text dense>
|
|
|
+ 像实体工厂安排工位一样,将已发布的数据标准和数据规则固定到生产线。
|
|
|
+ 实际执行脚本由数据工厂根据固定版本与数据集绑定自动生成。
|
|
|
+ </v-alert>
|
|
|
+
|
|
|
+ <section class="dataset-selector mt-4">
|
|
|
+ <div v-for="direction in ['source_table', 'target_table']" :key="direction">
|
|
|
+ <div class="dataset-selector__heading">
|
|
|
+ {{ direction === 'source_table' ? '输入数据集边' : '输出数据集边' }}
|
|
|
</div>
|
|
|
- <div class="mb-6" style="border: 1px dashed #666; padding: 10px; border-radius: 5px;">
|
|
|
- <div class="d-flex justify-center">
|
|
|
- <div style="width: 250px;">
|
|
|
- <v-text-field
|
|
|
- v-model="filteredBusinessDomain[value + '_name']"
|
|
|
- outlined dense hide-details
|
|
|
- label="输入名称快速搜索"
|
|
|
- ></v-text-field>
|
|
|
- </div>
|
|
|
- <v-btn class="half-button mx-3" @click="handleSearch(value)" color="primary">搜 索</v-btn>
|
|
|
- <v-btn color="#5cbbf6" class="white--text half-button" @click="handleReset(value)">重 置</v-btn>
|
|
|
+ <div class="dataset-selector__body">
|
|
|
+ <div class="d-flex">
|
|
|
+ <v-text-field
|
|
|
+ v-model="filteredBusinessDomain[direction + '_name']"
|
|
|
+ outlined
|
|
|
+ dense
|
|
|
+ hide-details
|
|
|
+ label="按数据集名称搜索"
|
|
|
+ @keydown.enter="handleSearch(direction)"
|
|
|
+ />
|
|
|
+ <v-btn class="ml-3" color="primary" @click="handleSearch(direction)">搜索</v-btn>
|
|
|
+ <v-btn class="ml-2" text color="primary" @click="handleReset(direction)">重置</v-btn>
|
|
|
</div>
|
|
|
- <v-list dense flat v-if="getDisplayBusinessDomain(value).length">
|
|
|
- <v-list-item-group v-model="changeObj[value]" multiple active-class="">
|
|
|
- <v-list-item v-for="item in getDisplayBusinessDomain(value)" :key="item.id" :value="item.id" three-line>
|
|
|
- <template v-slot:default="{ active }">
|
|
|
+ <v-list v-if="getDisplayBusinessDomain(direction).length" dense flat>
|
|
|
+ <v-list-item-group
|
|
|
+ v-model="datasetEdges[direction]"
|
|
|
+ :multiple="direction === 'source_table'"
|
|
|
+ active-class=""
|
|
|
+ >
|
|
|
+ <v-list-item
|
|
|
+ v-for="item in getDisplayBusinessDomain(direction)"
|
|
|
+ :key="item.id"
|
|
|
+ :value="item.uid || item.id"
|
|
|
+ >
|
|
|
+ <template #default="{ active }">
|
|
|
<v-list-item-action>
|
|
|
- <v-checkbox :input-value="active"></v-checkbox>
|
|
|
+ <v-checkbox :input-value="active" />
|
|
|
</v-list-item-action>
|
|
|
<v-list-item-content>
|
|
|
- <v-list-item-title>
|
|
|
- <span>{{ item.name_zh }}</span>
|
|
|
- </v-list-item-title>
|
|
|
+ <v-list-item-title>{{ item.name_zh }}</v-list-item-title>
|
|
|
<v-list-item-subtitle>
|
|
|
- <v-chip v-for="tag in item.tag" :key="tag.id" small class="mr-2">{{ tag.name_zh }}</v-chip>
|
|
|
+ {{ item.uid || item.id }}
|
|
|
</v-list-item-subtitle>
|
|
|
</v-list-item-content>
|
|
|
</template>
|
|
|
</v-list-item>
|
|
|
</v-list-item-group>
|
|
|
</v-list>
|
|
|
- <div v-else class="text-center" style="color: #666; padding: 10px;">暂无数据</div>
|
|
|
+ <div v-else class="text-center grey--text pa-4">暂无匹配数据集</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <production-line-assembler
|
|
|
+ v-model="productionLineSpec"
|
|
|
+ class="mt-5"
|
|
|
+ :dataflow-uid="dataflowUid"
|
|
|
+ :name="dataflowName"
|
|
|
+ :input-schema-refs="datasetEdges.source_table"
|
|
|
+ :output-schema-ref="normalizedTarget"
|
|
|
+ @readiness="releaseReadiness = $event"
|
|
|
+ />
|
|
|
+
|
|
|
+ <section v-if="legacyRequirementPresent" class="legacy-flow mt-5">
|
|
|
+ <div class="d-flex align-center justify-space-between">
|
|
|
+ <div>
|
|
|
+ <div class="legacy-flow__title">旧流程规则迁移区</div>
|
|
|
+ <div class="legacy-flow__hint">
|
|
|
+ 旧自然语言与脚本只读保留,不会进入新执行语义。
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <v-chip
|
|
|
+ :color="migrationMetadata.status === 'migrated' ? 'success' : 'warning'"
|
|
|
+ outlined
|
|
|
+ small
|
|
|
+ >
|
|
|
+ {{ migrationMetadata.status === 'migrated' ? '已迁移' : '未迁移' }}
|
|
|
+ </v-chip>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
<v-textarea
|
|
|
- v-model="changeObj.rule"
|
|
|
+ class="mt-3"
|
|
|
+ :value="legacyRuleText"
|
|
|
+ readonly
|
|
|
outlined
|
|
|
- hide-details
|
|
|
- label="请输入数据规则"
|
|
|
- :rows="10"
|
|
|
dense
|
|
|
- ></v-textarea>
|
|
|
- </div>
|
|
|
- <rule-authoring-panel
|
|
|
+ rows="4"
|
|
|
+ hide-details
|
|
|
+ label="旧规则描述(只读)"
|
|
|
+ />
|
|
|
+ <v-btn class="mt-3" small outlined color="primary" @click="focusAssembler">
|
|
|
+ <v-icon left small>mdi-source-branch-sync</v-icon>
|
|
|
+ 迁移为固定版本工位
|
|
|
+ </v-btn>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <v-btn
|
|
|
+ v-if="Object.keys(itemData).length"
|
|
|
class="mt-4"
|
|
|
- authoring-surface="data_flow"
|
|
|
- :initial-text="changeObj.rule || ''"
|
|
|
- :context="authoringContext"
|
|
|
- @candidate="handleRuleCandidate"
|
|
|
- @version="handleRuleVersion"
|
|
|
- />
|
|
|
- <div v-if="Object.keys(itemData).length" class="d-flex align-end justify-end mt-3">
|
|
|
- <v-btn color="primary" @click="handleViewCode">查看代码</v-btn>
|
|
|
- </div>
|
|
|
+ text
|
|
|
+ color="primary"
|
|
|
+ @click="handleViewCode"
|
|
|
+ >
|
|
|
+ 查看历史生成脚本(只读)
|
|
|
+ </v-btn>
|
|
|
</div>
|
|
|
</v-card>
|
|
|
- <v-card style="width: 500px;" class="ml-3 fullHeight d-flex flex-column">
|
|
|
+
|
|
|
+ <v-card class="ml-3 fullHeight d-flex flex-column" style="width: 500px;">
|
|
|
<v-banner single-line>
|
|
|
<div class="py-2 title">基础信息</div>
|
|
|
<template #actions>
|
|
|
- <v-btn
|
|
|
- text
|
|
|
- class="ml-3"
|
|
|
- color="primary"
|
|
|
- @click="handleSubmit"
|
|
|
- >
|
|
|
- <v-icon left>mdi-send-variant</v-icon>
|
|
|
- 确认提交
|
|
|
+ <v-btn text color="primary" :loading="saving" @click="handleSubmit">
|
|
|
+ <v-icon left>mdi-content-save-check</v-icon>
|
|
|
+ 保存生产线定义
|
|
|
</v-btn>
|
|
|
</template>
|
|
|
</v-banner>
|
|
|
<div class="pt-3 height-auto overflow-y-auto">
|
|
|
- <EditBase ref="editBaseRefs"></EditBase>
|
|
|
+ <edit-base ref="editBaseRefs" :item-data="itemData" />
|
|
|
+ <v-alert
|
|
|
+ class="mx-3 mt-3"
|
|
|
+ :type="releaseReadiness.ready ? 'success' : 'warning'"
|
|
|
+ text
|
|
|
+ dense
|
|
|
+ >
|
|
|
+ {{ releaseReadiness.ready
|
|
|
+ ? '固定版本、Schema 与证据均已就绪,可进入发布流程。'
|
|
|
+ : '当前可保存草稿,但尚不能发布到数据工厂。' }}
|
|
|
+ </v-alert>
|
|
|
</div>
|
|
|
</v-card>
|
|
|
- <v-navigation-drawer
|
|
|
- v-model="drawer"
|
|
|
- fixed
|
|
|
- temporary
|
|
|
- right
|
|
|
- width="800"
|
|
|
- >
|
|
|
- <div class="d-flex flex-column" style="height: 100%;">
|
|
|
- <v-banner single-line>
|
|
|
- <div class="py-2 title">执行代码查看</div>
|
|
|
- </v-banner>
|
|
|
- <div class="pa-3 flex-grow-1 overflow-y-auto">
|
|
|
- <div class="code-preview" v-html="highlightedCode"></div>
|
|
|
- </div>
|
|
|
+
|
|
|
+ <v-navigation-drawer v-model="drawer" fixed temporary right width="760">
|
|
|
+ <v-banner single-line>
|
|
|
+ <div class="py-2 title">历史生成脚本(只读迁移参考)</div>
|
|
|
+ </v-banner>
|
|
|
+ <div class="pa-4">
|
|
|
+ <v-alert type="warning" text dense>
|
|
|
+ 该内容不参与受治理生产线执行,迁移后请以固定版本和证据链为准。
|
|
|
+ </v-alert>
|
|
|
+ <v-textarea
|
|
|
+ :value="scriptContent"
|
|
|
+ readonly
|
|
|
+ outlined
|
|
|
+ rows="24"
|
|
|
+ hide-details
|
|
|
+ label="历史脚本"
|
|
|
+ />
|
|
|
</div>
|
|
|
</v-navigation-drawer>
|
|
|
</div>
|
|
|
@@ -109,15 +161,13 @@
|
|
|
<script>
|
|
|
import EditBase from './editBase.vue'
|
|
|
import { api } from '@/api/dataGovernance'
|
|
|
-import hljs from 'highlight.js'
|
|
|
-import 'highlight.js/styles/monokai.css'
|
|
|
-import RuleAuthoringPanel from '@/components/DataRules/RuleAuthoringPanel'
|
|
|
+import ProductionLineAssembler from '@/components/DataRules/ProductionLineAssembler'
|
|
|
|
|
|
export default {
|
|
|
name: 'editPage',
|
|
|
components: {
|
|
|
EditBase,
|
|
|
- RuleAuthoringPanel
|
|
|
+ ProductionLineAssembler
|
|
|
},
|
|
|
props: {
|
|
|
itemData: {
|
|
|
@@ -129,169 +179,158 @@ export default {
|
|
|
return {
|
|
|
drawer: false,
|
|
|
loading: false,
|
|
|
- scriptContent: '', // 执行代码
|
|
|
- businessDomain: [], // 业务域列表
|
|
|
- // 业务域过滤
|
|
|
+ saving: false,
|
|
|
+ scriptContent: '',
|
|
|
+ businessDomain: [],
|
|
|
filteredBusinessDomain: {
|
|
|
source_table: [],
|
|
|
target_table: [],
|
|
|
source_table_name: null,
|
|
|
target_table_name: null
|
|
|
},
|
|
|
- changeObj: {
|
|
|
- rule: null,
|
|
|
+ datasetEdges: {
|
|
|
source_table: [],
|
|
|
- target_table: []
|
|
|
+ target_table: null
|
|
|
+ },
|
|
|
+ productionLineSpec: {},
|
|
|
+ legacyRequirement: {},
|
|
|
+ releaseReadiness: {
|
|
|
+ ready: false,
|
|
|
+ blockers: ['尚未完成生产线编排']
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- authoringContext () {
|
|
|
- return {
|
|
|
- source_table_ids: this.changeObj.source_table || [],
|
|
|
- target_table_ids: this.changeObj.target_table || []
|
|
|
- }
|
|
|
+ dataflowUid () {
|
|
|
+ return this.itemData.dataflow_uid || this.itemData.data_flow_uid || this.itemData.uid || null
|
|
|
},
|
|
|
- highlightedCode () {
|
|
|
- if (!this.scriptContent) {
|
|
|
- return ''
|
|
|
- }
|
|
|
- try {
|
|
|
- // highlight.js 高亮代码,尝试自动检测语言
|
|
|
- const result = hljs.highlightAuto(this.scriptContent)
|
|
|
- return `<pre><code class="hljs ${result.language || ''}">${result.value}</code></pre>`
|
|
|
- } catch (error) {
|
|
|
- console.error('代码高亮错误:', error)
|
|
|
- // 如果高亮失败,返回转义后的纯文本
|
|
|
- return `<pre><code>${this.escapeHtml(this.scriptContent)}</code></pre>`
|
|
|
+ dataflowName () {
|
|
|
+ return this.itemData.name_zh || this.$refs.editBaseRefs?.formValues?.name_zh || '未命名数据生产线'
|
|
|
+ },
|
|
|
+ normalizedTarget () {
|
|
|
+ const target = this.datasetEdges.target_table
|
|
|
+ return Array.isArray(target) ? target[0] || null : target
|
|
|
+ },
|
|
|
+ legacyRuleText () {
|
|
|
+ return typeof this.legacyRequirement.rule === 'string'
|
|
|
+ ? this.legacyRequirement.rule
|
|
|
+ : ''
|
|
|
+ },
|
|
|
+ legacyRequirementPresent () {
|
|
|
+ return Boolean(this.legacyRuleText || this.legacyRequirement.legacy_script_path)
|
|
|
+ },
|
|
|
+ migrationMetadata () {
|
|
|
+ return {
|
|
|
+ status: this.productionLineSpec.components?.length ? 'migrated' : 'unmigrated',
|
|
|
+ legacy_fields_present: this.legacyRequirementPresent,
|
|
|
+ preserved_for_read_only: true,
|
|
|
+ governed_semantics: 'dataflow_spec'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
async created () {
|
|
|
this.loading = true
|
|
|
await this.getList()
|
|
|
- if (Object.keys(this.itemData).length) {
|
|
|
- await this.getDetails()
|
|
|
- }
|
|
|
+ if (Object.keys(this.itemData).length) await this.getDetails()
|
|
|
this.loading = false
|
|
|
},
|
|
|
methods: {
|
|
|
- handleRuleVersion (version) {
|
|
|
- this.$set(this.changeObj, 'rule_version_id', version.id)
|
|
|
- this.$set(this.changeObj, 'rule_version_status', version.status)
|
|
|
- },
|
|
|
- handleRuleCandidate (candidate, sourceText) {
|
|
|
- const ruleSpec = candidate?.rule_spec
|
|
|
- if (!ruleSpec) {
|
|
|
- this.$snackbar.warning('候选中没有可采用的数据规则')
|
|
|
- return
|
|
|
- }
|
|
|
- this.$set(this.changeObj, 'rule', sourceText)
|
|
|
- this.$set(this.changeObj, 'rule_spec', ruleSpec)
|
|
|
- },
|
|
|
- // 获取业务域列表
|
|
|
async getList () {
|
|
|
try {
|
|
|
const { data } = await api.getBusinessDomainList2()
|
|
|
- if (!data || !data?.length) {
|
|
|
- this.businessDomain = []
|
|
|
- return
|
|
|
- }
|
|
|
- this.businessDomain = data.map(e => {
|
|
|
- return {
|
|
|
- ...e,
|
|
|
- label: `${e.tag}:${e.name_zh}`
|
|
|
- }
|
|
|
- })
|
|
|
+ this.businessDomain = (data || []).map(item => ({
|
|
|
+ ...item,
|
|
|
+ label: `${item.tag || '数据集'}:${item.name_zh}`
|
|
|
+ }))
|
|
|
this.filteredBusinessDomain.source_table = [...this.businessDomain]
|
|
|
this.filteredBusinessDomain.target_table = [...this.businessDomain]
|
|
|
} catch (error) {
|
|
|
this.$snackbar.error(error)
|
|
|
}
|
|
|
},
|
|
|
- // 搜索业务域
|
|
|
- handleSearch (value) {
|
|
|
- const keyword = (this.filteredBusinessDomain[value + '_name'] || '').trim()
|
|
|
- if (!keyword) {
|
|
|
- this.filteredBusinessDomain[value] = [...this.businessDomain]
|
|
|
- return
|
|
|
- }
|
|
|
- this.filteredBusinessDomain[value] = this.businessDomain.filter(e => (e.name_zh || '').includes(keyword))
|
|
|
+ handleSearch (direction) {
|
|
|
+ const keyword = (this.filteredBusinessDomain[`${direction}_name`] || '').trim()
|
|
|
+ this.filteredBusinessDomain[direction] = keyword
|
|
|
+ ? this.businessDomain.filter(item => (item.name_zh || '').includes(keyword))
|
|
|
+ : [...this.businessDomain]
|
|
|
},
|
|
|
- // 重置业务域
|
|
|
- handleReset (value) {
|
|
|
- this.filteredBusinessDomain[value + '_name'] = null
|
|
|
- this.filteredBusinessDomain[value] = [...this.businessDomain]
|
|
|
+ handleReset (direction) {
|
|
|
+ this.filteredBusinessDomain[`${direction}_name`] = null
|
|
|
+ this.filteredBusinessDomain[direction] = [...this.businessDomain]
|
|
|
},
|
|
|
- // 获取显示的业务域
|
|
|
- getDisplayBusinessDomain (value) {
|
|
|
- const list = this.filteredBusinessDomain[value]
|
|
|
- if (!Array.isArray(list)) {
|
|
|
- return this.businessDomain
|
|
|
- }
|
|
|
- return list
|
|
|
+ getDisplayBusinessDomain (direction) {
|
|
|
+ return Array.isArray(this.filteredBusinessDomain[direction])
|
|
|
+ ? this.filteredBusinessDomain[direction]
|
|
|
+ : this.businessDomain
|
|
|
},
|
|
|
- // 详情
|
|
|
async getDetails () {
|
|
|
try {
|
|
|
const { data } = await api.getDataFlowDetails(this.itemData.id)
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.editBaseRefs.setValues(data)
|
|
|
- })
|
|
|
- this.changeObj = data.script_requirement || {}
|
|
|
+ this.$nextTick(() => this.$refs.editBaseRefs.setValues(data))
|
|
|
+ const requirement = data.script_requirement && typeof data.script_requirement === 'object'
|
|
|
+ ? data.script_requirement
|
|
|
+ : {}
|
|
|
+ this.productionLineSpec = requirement.dataflow_spec || {}
|
|
|
+ const edges = requirement.dataset_edges || {}
|
|
|
+ this.datasetEdges = {
|
|
|
+ source_table: Array.isArray(edges.source_table)
|
|
|
+ ? edges.source_table
|
|
|
+ : Array.isArray(requirement.source_table) ? requirement.source_table : [],
|
|
|
+ target_table: edges.target_table || requirement.target_table?.[0] || requirement.target_table || null
|
|
|
+ }
|
|
|
+ this.legacyRequirement = requirement.dataflow_spec ? {} : { ...requirement }
|
|
|
} catch (error) {
|
|
|
this.$snackbar.error(error)
|
|
|
}
|
|
|
},
|
|
|
- // 查看执行代码
|
|
|
+ focusAssembler () {
|
|
|
+ const target = this.$el.querySelector('.assembler')
|
|
|
+ if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
|
|
+ },
|
|
|
async handleViewCode () {
|
|
|
- if (!this.itemData || !this.itemData.id) {
|
|
|
- this.$snackbar.error('缺少数据流ID')
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- this.scriptContent = ''
|
|
|
+ if (!this.itemData.id) return
|
|
|
this.loading = true
|
|
|
try {
|
|
|
const { data } = await api.getDataFlowScriptContent(this.itemData.id)
|
|
|
- if (!data?.script_content) {
|
|
|
- this.$snackbar.warning('脚本内容为空')
|
|
|
- return
|
|
|
- }
|
|
|
this.scriptContent = data?.script_content || ''
|
|
|
this.drawer = true
|
|
|
} catch (error) {
|
|
|
- this.$snackbar.error(error.message || '获取脚本失败')
|
|
|
+ this.$snackbar.error(error?.message || '获取历史脚本失败')
|
|
|
} finally {
|
|
|
this.loading = false
|
|
|
}
|
|
|
},
|
|
|
async handleSubmit () {
|
|
|
- const params = this.$refs.editBaseRefs.getValue()
|
|
|
- if (!params) {
|
|
|
- return
|
|
|
- }
|
|
|
- const query = {
|
|
|
- ...params,
|
|
|
- script_requirement: this.changeObj
|
|
|
+ const base = this.$refs.editBaseRefs.getValue()
|
|
|
+ if (!base) return
|
|
|
+ const payload = {
|
|
|
+ ...base,
|
|
|
+ script_requirement: {
|
|
|
+ dataflow_spec: {
|
|
|
+ ...this.productionLineSpec,
|
|
|
+ name: base.name_zh || this.productionLineSpec.name
|
|
|
+ },
|
|
|
+ dataset_edges: {
|
|
|
+ source_table: [...this.datasetEdges.source_table],
|
|
|
+ target_table: this.normalizedTarget
|
|
|
+ },
|
|
|
+ migration_metadata: this.migrationMetadata
|
|
|
+ }
|
|
|
}
|
|
|
- const isEdit = Object.keys(this.itemData).length > 0
|
|
|
+ this.saving = true
|
|
|
try {
|
|
|
- if (isEdit) {
|
|
|
- await api.updateDataFlow(this.itemData.id, query)
|
|
|
+ if (Object.keys(this.itemData).length) {
|
|
|
+ await api.updateDataFlow(this.itemData.id, payload)
|
|
|
} else {
|
|
|
- await api.addDataFlow(query)
|
|
|
+ await api.addDataFlow(payload)
|
|
|
}
|
|
|
- this.$snackbar.success(isEdit ? '更新成功' : '新增成功')
|
|
|
+ this.$snackbar.success('数据生产线定义已保存')
|
|
|
this.$emit('success')
|
|
|
} catch (error) {
|
|
|
this.$snackbar.error(error)
|
|
|
+ } finally {
|
|
|
+ this.saving = false
|
|
|
}
|
|
|
- },
|
|
|
- escapeHtml (text) {
|
|
|
- const div = document.createElement('div')
|
|
|
- div.textContent = text
|
|
|
- return div.innerHTML
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -299,7 +338,7 @@ export default {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.title {
|
|
|
- color: #1976D2;
|
|
|
+ color: #1976d2;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
.fullscreen {
|
|
|
@@ -310,49 +349,57 @@ export default {
|
|
|
height: 100%;
|
|
|
}
|
|
|
.width-auto {
|
|
|
- width: 0;
|
|
|
flex: 1;
|
|
|
+ width: 0;
|
|
|
}
|
|
|
.height-auto {
|
|
|
- height: 0;
|
|
|
flex: 1;
|
|
|
+ height: 0;
|
|
|
}
|
|
|
-::v-deep ul {
|
|
|
- padding-left: 0;
|
|
|
+.dataset-selector {
|
|
|
+ display: grid;
|
|
|
+ gap: 16px;
|
|
|
+ grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
}
|
|
|
-.code-preview {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- overflow: auto;
|
|
|
- padding: 16px;
|
|
|
- font-family: 'Courier New', Courier, monospace;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 1.5;
|
|
|
-
|
|
|
- ::v-deep pre {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- background: transparent;
|
|
|
- border: none;
|
|
|
- font-family: inherit;
|
|
|
- font-size: inherit;
|
|
|
- line-height: inherit;
|
|
|
- height: 100%;
|
|
|
+.dataset-selector__heading {
|
|
|
+ color: #17324d;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+.dataset-selector__body,
|
|
|
+.legacy-flow {
|
|
|
+ border: 1px solid #d8e1ea;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 14px;
|
|
|
+}
|
|
|
+.dataset-selector__body {
|
|
|
+ min-height: 250px;
|
|
|
+}
|
|
|
+.legacy-flow {
|
|
|
+ background: #fafbfd;
|
|
|
+}
|
|
|
+.legacy-flow__title {
|
|
|
+ color: #17324d;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.legacy-flow__hint {
|
|
|
+ color: #64788c;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+@media (max-width: 960px) {
|
|
|
+ .fullscreen {
|
|
|
+ display: block !important;
|
|
|
+ overflow-y: auto;
|
|
|
}
|
|
|
-
|
|
|
- ::v-deep code {
|
|
|
- display: block;
|
|
|
+ .fullHeight,
|
|
|
+ .height-auto {
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ .width-auto {
|
|
|
width: 100%;
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- background: transparent;
|
|
|
- border: none;
|
|
|
- font-family: inherit;
|
|
|
- font-size: inherit;
|
|
|
- line-height: inherit;
|
|
|
- white-space: pre;
|
|
|
- overflow-wrap: normal;
|
|
|
- overflow-x: auto;
|
|
|
+ }
|
|
|
+ .dataset-selector {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
}
|
|
|
}
|
|
|
</style>
|