Merge branch 'feature/new-sys' into 'master'

支持传入主题色

See merge request workbench/y-code!25

src/assets/styles/variable.less

@@ -0,0 +1,5 @@
+@primary-color: var(--primary-color); // 主题色
+@primary-light-color: var(--primary-light-color); // 主题色 - 浅色
+@table-head-bg-color: var(--table-head-bg-color); // 表头背景色
+@table-head-font-color: var(--table-head-font-color); // 表头字体颜色
+@primary-bg-color: #f8f8f8;

src/components/common/y-table.vue

@@ -39,7 +39,14 @@
         :scroll="{ x: 1000, y: `calc(100vh - 280px)` }"
         size="small"
         bordered
-      ></a-table>
+      >
+        <template #bodyCell="{ column, record }">
+          <a-image v-if="column.show_type === 'img'" :src="record[column.dataIndex]" :width="160" />
+          <a v-else-if="column.show_type === 'link'" target="_blank" :href="record[column.dataIndex]">{{ record[column.dataIndex] }}</a>
+          <div v-else-if="column.show_type === 'richText'" v-html="record[column.dataIndex]"></div>
+          <template v-else>{{ record[column.dataIndex] }}</template>
+        </template>
+      </a-table>
       <a-pagination
         v-model:current="pageState.page"
         :total="total"

src/global.less

@@ -1,4 +1,5 @@
-@primary-bg-color: #f8f8f8;
+// @primary-bg-color: #f8f8f8;
+@import '../src/assets/styles/variable.less';
 
 html, body {
   background-color: @primary-bg-color;

src/main.ts

@@ -9,22 +9,26 @@ import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helpe
 let app
 function render(props: Object = {}) {
   app = createApp(App);
+  setStyleSheet(props.styles)
   const router = createProjectRouter(props.base)
   app.use(router)
   app.use(VueGridLayout);
   app.use(createPinia())
   app.mount("#y-code-app")
-  // const getContainer = () => {
-  //   props.container ? props.container.querySelector('#y-code-container') : document.getElementById('y-code-container')
-  // }
-  // const container = getContainer()
-  // if (container) {
-  //   app.mount(container)
-  // } else {
-  //   window.addEventListener("DOMContentLoaded", () => {
-  //     app.mount(getContainer())
-  //   })
-  // }
+}
+
+function setStyleSheet(styles: Object = {}) {
+  const styleEle = document.createElement('style')
+  styleEle.type = 'text/css'
+  styleEle.innerHTML = `
+  :root {
+    --primary-color: ${styles.primaryColor || '#1677ff'};
+    --primary-light-color: ${styles.primaryLightColor || '#4096ff'};
+    --table-head-bg-color: ${styles.tableHeadBgColor || '#fafafa'};
+    --table-head-font-color: ${styles.tableHeadFontColor || '#191919'};
+  }
+  `
+  document.head.appendChild(styleEle)
 }
 
 const __POWERED_BY_QIANKUN__ = qiankunWindow.__POWERED_BY_QIANKUN__ || window.proxy?.__POWERED_BY_QIANKUN__

src/views/config-manage/module-cfg/components/field-modal.vue

@@ -54,6 +54,19 @@
               {{ record.field_numerical_name }}
             </template>
           </template>
+          <template v-if="column.dataIndex === 'show_type'">
+            <a-select 
+              v-if="editableData[record.field_id]" 
+              v-model:value="record.show_type" 
+              :options="showTypeOpts" 
+              placeholder="请选择"
+              allow-clear
+              style="width: 120px">
+            </a-select>
+            <template v-else>
+              {{ record.show_type }}
+            </template>
+          </template>
           <template v-if="column.dataIndex === 'field_type_name'">
             <a-select
               v-if="editableData[record.field_id]"
@@ -159,7 +172,7 @@
 
 <script setup>
 import { onMounted, reactive, ref, watch } from "vue";
-import { viewCfgCols, originalTypes } from "@/views/config-manage/module-cfg/config";
+import { viewCfgCols, originalTypes, showTypeOpts } from "@/views/config-manage/module-cfg/config";
 import {
   getFieldTypeSelect,
   getFieldNumSelect,
@@ -332,6 +345,7 @@ const handleSave = (record) => {
     { field: 'field_name', msg: "请填写字段名称" },
     { field: 'field_numerical_type_id', msg: "请选择字段类型" },
     { field: 'belong_to_table', msg: "请填写关联表" },
+    { field: 'show_type', msg: "请选择展示类型" },
   ]
   for(let i = 0; i < validateFields.length; i++) {
     const curr = validateFields[i];

src/views/config-manage/module-cfg/config.ts

@@ -12,6 +12,7 @@ export const viewCfgCols = [
   { dataIndex: 'field_name', title: '字段名称', align: 'center'},
   { dataIndex: 'field_title', title: '字段标题', align: 'center'},
   { dataIndex: 'field_numerical_name', title: '字段类型', align: 'center', width: 120},
+  { dataIndex: 'show_type', title: '展示类型', align: 'center', width: 120},
   { dataIndex: 'field_type_name', title: '搜索类型', align: 'center'},
   { dataIndex: 'is_search', title: '是否可搜索', align: 'center'},
   { dataIndex: 'sort', title: '排序', align: 'center'},
@@ -26,3 +27,10 @@ export const originalTypes = [
   { label: 'sql', value: 1 },
   { label: 'json', value: 2 },
 ]
+
+export const showTypeOpts = [
+  { label: '文本', value: 'text' },
+  { label: '图片', value: 'img' },
+  { label: '链接', value: 'link' },
+  { label: '富文本', value: 'richText' },
+]

src/views/page-show-info/page-info/index,.vue

@@ -302,6 +302,8 @@ const getAllCardsData = async () => {
 };
 </script>
 <style lang="less" scoped>
+@import './style.less';
+
 .view-box {
   height: 100%;
   width: 100%;
@@ -338,4 +340,5 @@ const getAllCardsData = async () => {
 .vue-grid-item {
   height: auto;
 }
+
 </style>

src/views/page-show-info/page-info/style.less

@@ -0,0 +1,55 @@
+@import '@/assets/styles/variable.less';
+
+// 设置按钮
+:deep(.@{ant-prefix}-btn-primary) {
+  background-color: @primary-color !important;
+  &:hover {
+    background-color: @primary-light-color !important;
+  }
+}
+
+// 设置输入框
+:deep(.@{ant-prefix}-input-affix-wrapper:not(.@{ant-prefix}-input-affix-wrapper-disabled):hover) {
+  border-color: @primary-light-color !important;
+}
+
+// 设置选择框
+:deep(.@{ant-prefix}-select-selector:hover) {
+  border-color: @primary-light-color !important;
+}
+
+:deep(.@{ant-prefix}-select-focused) {
+  .@{ant-prefix}-select-selector {
+    border-color: @primary-light-color !important;
+  }
+}
+
+
+// 设置日期框
+:deep(.@{ant-prefix}-picker) {
+  &:hover, &-focused {
+    border-color: @primary-light-color !important;
+  }
+  &-active-bar {
+    background-color: @primary-light-color !important;
+  }
+}
+
+// 设置表格
+:deep(.@{ant-prefix}-table-thead > tr > th) {
+  background-color: @table-head-bg-color !important;
+  color: @table-head-font-color !important;
+}
+
+// 设置分页器
+:deep(.@{ant-prefix}-pagination-item) {
+  &-active {
+    border-color: @primary-color !important;
+    a {
+      color: @primary-color !important;
+    }
+  }
+  &-link-icon {
+    color: @primary-color !important;
+  }
+}

src/views/view-all-manage/create-view/index.vue

@@ -99,7 +99,14 @@
               :scroll="{ x: 1000, y: `calc(100vh - 260px)` }"
               size="small"
               bordered
-            ></a-table>
+            >
+              <template #bodyCell="{ column, record }">
+                <a-image v-if="column.show_type === 'img'" :src="record[column.dataIndex]" :width="160" />
+                <a v-else-if="column.show_type === 'link'" target="_blank" :href="record[column.dataIndex]">{{ record[column.dataIndex] }}</a>
+                <div v-else-if="column.show_type === 'richText'" v-html="record[column.dataIndex]"></div>
+                <template v-else>{{ record[column.dataIndex] }}</template>
+              </template>
+            </a-table>
             <a-pagination
               v-model:current="previewData.page"
               :total="previewData.total"

src/views/view-all-manage/view-list/config.ts

@@ -1,4 +1,5 @@
 export const viewListCols = [
+  { dataIndex: 'preview_id', title: 'id', align: 'center' },
   { dataIndex: 'preview_name', title: '视图名称', align: 'center' },
   { dataIndex: 'created_at', title: '创建时间', align: 'center' },
   { dataIndex: 'action', title: '操作', align: 'center' },

src/views/view-all-manage/view-list/index.vue

@@ -132,6 +132,10 @@ onMounted(() => {
 const toGetProModular = () => {
   getProModular().then((res) => {
     projectSel.value = res.data;
+    if (res.data.length) {
+      projectId.value = res.data[0].value;
+      onProjectChange(projectId.value)
+    }
   });
 };