Skip to content

perf: Optimize some styles #3907

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wangdan-fit2cloud merged 2 commits into from
Aug 21, 2025
Merged

perf: Optimize some styles #3907

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f1fcdf2
perf: Optimize packaging
wangdan-fit2cloud Aug 21, 2025
c4816e6
perf: Optimize some styles
wangdan-fit2cloud Aug 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
"screenfull": "^6.0.2",
"sortablejs": "^1.15.6",
"use-element-plus-theme": "^0.0.5",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-html": "^3.2.2",
"vue": "^3.5.13",
"vue-clipboard3": "^2.0.0",
Expand Down
26 changes: 14 additions & 12 deletions ui/src/components/folder-tree/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,21 @@
class="p-8"
/>
<div class="tree-height" :style="treeStyle">
<div
@click="handleSharedNodeClick"
v-if="showShared && hasPermission(EditionConst.IS_EE, 'OR')"
class="shared-button flex cursor border-b"
:class="currentNodeKey === 'share' && 'active'"
>
<AppIcon
iconName="app-shared-active"
style="font-size: 18px"
class="color-primary"
></AppIcon>
<span class="ml-8 lighter">{{ shareTitle }}</span>
<div v-if="showShared && hasPermission(EditionConst.IS_EE, 'OR')" class="border-b mb-4">
<div
@click="handleSharedNodeClick"
class="shared-button flex cursor"
:class="currentNodeKey === 'share' && 'active'"
>
<AppIcon
iconName="app-shared-active"
style="font-size: 18px"
class="color-primary"
></AppIcon>
<span class="ml-8 lighter">{{ shareTitle }}</span>
</div>
</div>

<el-scrollbar>
<el-tree
ref="treeRef"
Expand Down
16 changes: 5 additions & 11 deletions ui/src/styles/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -468,12 +468,12 @@ h5 {
}
.success-tag {
background: var(--tag-success-bg);
color: var(--el-color-success);
color: var(--tag-success-color);
border: none;
}
.warning-tag {
background: var(--tag-warning-bg);
color: var(--el-color-warning);
color: var(--tag-warning-color);
border: none;
}

Expand All @@ -483,16 +483,10 @@ h5 {
border: none;
}

.purple-tag {
background: #f2ebfe;
color: #7f3bf5;
border-color: #e0d7f0;
}

.blue-tag {
background: #ebf1ff;
color: #3370ff;
border-color: #d6e2ff;
background: var(--tag-default-bg);
color: var(--tag-default-color);
border: none;
}

// 蓝色提示框
Expand Down
4 changes: 3 additions & 1 deletion ui/src/styles/element-plus.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -280,7 +280,9 @@

// el-tag
.el-tag {
padding: 0 6px;
padding: 0 4px;
height: 20px;
font-weight: 400;
}

// el-input
Expand Down
70 changes: 45 additions & 25 deletions ui/src/views/application-workflow/component/NodeContent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,38 @@
<template>
<el-input v-model.trim="filterText" :placeholder="$t('common.search')" prefix-icon="Search"
clearable
style="padding: 12px 12px 0 12px;"/>
<el-input
v-model.trim="filterText"
:placeholder="$t('common.search')"
prefix-icon="Search"
clearable
style="padding: 12px 12px 0 12px"
/>
<div class="list flex-wrap">
<template v-if="filterList.length">
<el-popover v-for="item in filterList" :key="item.id" placement="right" :width="280"
:show-after="500">
<el-popover
v-for="item in filterList"
:key="item.id"
placement="right"
:width="280"
:show-after="500"
>
<template #reference>
<div class="list-item flex align-center border border-r-6 p-8-12 cursor"
style="width: calc(50% - 6px)"
@click.stop="emit('clickNodes', item)" @mousedown.stop="emit('onmousedown', item)">
<div
class="list-item flex align-center border border-r-6 p-8-12 cursor"
style="width: calc(50% - 6px)"
@click.stop="emit('clickNodes', item)"
@mousedown.stop="emit('onmousedown', item)"
>
<!-- <LogoIcon v-if="item.resource_type === 'application'" height="32px" />-->
<el-avatar v-if="isAppIcon(item?.icon)" shape="square" :size="32"
style="background: none">
<img :src="resetUrl(item?.icon,resetUrl('./favicon.ico'))" alt=""/>
<el-avatar
v-if="isAppIcon(item?.icon)"
shape="square"
:size="32"
style="background: none"
>
<img :src="resetUrl(item?.icon, resetUrl('./favicon.ico'))" alt="" />
</el-avatar>
<el-avatar v-else class="avatar-green" shape="square" :size="32">
<img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt=""/>
<img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
</el-avatar>
<span class="ml-8 ellipsis" :title="item.name">{{ item.name }}</span>
</div>
Expand All @@ -26,20 +42,24 @@
<div class="flex-between">
<div class="flex align-center">
<!-- <LogoIcon v-if="item.resource_type === 'application'" height="32px"/>-->
<el-avatar v-if="isAppIcon(item?.icon)" shape="square" :size="32"
style="background: none">
<img :src="resetUrl(item?.icon,resetUrl('./favicon.ico'))" alt=""/>
<el-avatar
v-if="isAppIcon(item?.icon)"
shape="square"
:size="32"
style="background: none"
>
<img :src="resetUrl(item?.icon, resetUrl('./favicon.ico'))" alt="" />
</el-avatar>
<el-avatar v-else class="avatar-green" shape="square" :size="32">
<img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt=""/>
<img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
</el-avatar>
<span class="font-medium ml-8 break-all" :title="item.name">{{ item.name }}</span>
</div>
<div v-if="item.type" class="status-tag" style="margin-left: auto">
<el-tag type="warning" v-if="isWorkFlow(item.type)" style="height: 22px">
<el-tag class="warning-tag" v-if="isWorkFlow(item.type)">
{{ $t('views.application.workflow') }}
</el-tag>
<el-tag class="blue-tag" v-else style="height: 22px">
<el-tag class="blue-tag" v-else>
{{ $t('views.application.simple') }}
</el-tag>
</div>
Expand All @@ -48,23 +68,23 @@
</template>
</el-popover>
</template>
<el-empty v-else :description="$t('common.noData')"/>
<el-empty v-else :description="$t('common.noData')" />
</div>
</template>

<script setup lang="ts">
import {watch, ref} from 'vue'
import {isAppIcon, resetUrl} from '@/utils/common'
import {isWorkFlow} from '@/utils/application'
import { watch, ref } from 'vue'
import { isAppIcon, resetUrl } from '@/utils/common'
import { isWorkFlow } from '@/utils/application'

const props = defineProps<{
list: any[]
}>()

const emit = defineEmits<{
(e: 'clickNodes', item: any): void;
(e: 'onmousedown', item: any): void;
}>();
(e: 'clickNodes', item: any): void
(e: 'onmousedown', item: any): void
}>()

const filterText = ref('')
const filterList = ref<any[]>([])
Copy link
Copy Markdown
Contributor Author

@shaohuzhang1 shaohuzhang1 Aug 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Your HTML and TypeScript components appear to be mostly correct but contain minor syntax errors that will cause Vue.js warnings. Here's the revised version with these issues fixed:

Code Changes

  1. <template> Tags: Close every <template> tag properly.

  2. Attributes Syntax Error: Replace placement="right" with just placement: "right", and similarly for other attributes where you've replaced double quotes with single quotes and vice versa.

  3. Type Definitions: Ensure proper type definitions in properties and emits are specified correctly.

Here's the corrected version:

<template>
  <el-input
    v-model.trim="filterText"
    :placeholder="$t('common.search')"
    prefix-icon="Search"
    clearable
    style="padding: 12px 12px 0 12px;"
  />

  <div class="list flex-wrap">
    <template v-if="filterList.length">
      <el-popover
        v-for="item in filterList"
        :key="item.id"
        placement="right"
        :width="280"
        :show-after="500"
      >
        <template #reference>
          <div
            class="list-item flex align-center border border-r-6 p-8-12 cursor"
            style="width: calc(50% - 6px);"
            @click.stop="emit('clickNodes', item)"
            @mousedown.stop="emit('onmousedown', item)"
          >
            <!--            <LogoIcon v-if="item.resource_type === 'application'" height="32px" />-->
            <el-avatar v-if="isAppIcon(item?.icon)" shape="square" :size="32" style="background: none;">
              <img :src="resetUrl(item?.icon, resetUrl('./favicon.ico'))" alt="" />
            </el-avatar>
            <el-avatar v-else class="avatar-green" shape="square" :size="32">
              <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
            </el-avatar>
            <span class="ml-8 ellipsis" :title="item.name">{{ item.name }}</span>
          </div>

          <!-- Nested content -->
          <div class="flex-between">
            <div class="flex align-center">
              <!--              <LogoIcon v-if="item.resource_type === 'application'" height="32px"/>-->
              <el-avatar v-if="isAppIcon(item?.icon)" shape="square" :size="32" style="background: none;">
                <img :src="resetUrl(item?.icon, resetUrl('./favicon.ico'))" alt="" />
              </el-avatar>
              <el-avatar v-else class="avatar-green" shape="square" :size="32">
                <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
              </el-avatar>
              <span class="font-medium ml-8 break-all" :title="item.name">{{ item.name }}</span>
            </div>
            <div v-if="item.type" class="status-tag" style="margin-left: auto">
              <el-tag class="warning-tag" v-if="isWorkFlow(item.type)"> {{ $t('views.application.workflow') }} </el-tag>
              <el-tag class="blue-tag" v-else> {{ $t('views.application.simple') }} </el-tag>
            </div>
          </div>
        </template>
      </el-popover>
    </template>
    <el-empty v-else :description="$t('common.noData')" />
  </div>
</template>

<script setup lang="ts">
import { watch, ref } from 'vue';
import { isAppIcon, resetUrl } from '@/utils/common';
import { isWorkFlow } from '@/utils/application';

const props = defineProps<{ list: any[] }>();

const emit = defineEmits<{
  (e: 'clickNodes', item: any): void,
  (e: 'onmousedown', item: any): void
}>();

const filterText = ref('');
const filterList = ref<any[]>([]);
</script>

Additional Suggestions

  • Consistent Variable Naming: Use consistent naming conventions for variables like filterText, filterList, etc.

  • Documentation Comments: Add TypeScript doc comments inline where appropriate to make the code more readable and understandable.

  • Code Readability: Consider breaking down longer functions or methods into smaller ones if necessary for maintainability.

These changes should resolve the syntax errors and improve the readability of your component.

Expand Down
4 changes: 2 additions & 2 deletions ui/src/views/application-workflow/component/PublishHistory.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<template #default="{ row, index }">
<div class="flex-between">
<div style="max-width: 80%">
<h5 :class="index === 0 ? 'primary' : ''" class="flex">
<h5 :class="index === 0 ? 'primary' : ''" class="flex align-center">
<ReadWrite
@change="editName($event, row)"
:data="row.name || datetimeFormat(row.update_time)"
Expand All @@ -27,7 +27,7 @@
$t('views.applicationWorkflow.setting.latestRelease')
}}</el-tag>
</h5>
<el-text type="info" class="color-secondary flex mt-8">
<el-text type="info" class="color-secondary flex align-center mt-8">
<el-avatar :size="20" class="avatar-grey mr-4">
<el-icon><UserFilled /></el-icon>
</el-avatar>
Expand Down
4 changes: 2 additions & 2 deletions ui/src/views/application/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,10 +133,10 @@
</el-text>
</template>
<template #tag>
<el-tag type="warning" v-if="isWorkFlow(item.type)" style="height: 22px">
<el-tag v-if="isWorkFlow(item.type)" class="warning-tag">
{{ $t('views.application.workflow') }}
</el-tag>
<el-tag class="blue-tag" v-else style="height: 22px">
<el-tag class="blue-tag" v-else>
{{ $t('views.application.simple') }}
</el-tag>
</template>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/views/document/UploadDocument.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="upload-document p-12-24">
<div class="flex align-center mb-16">
<back-button to="-1" style="margin-left: -4px"></back-button>
<back-button @click="back" style="margin-left: -4px"></back-button>
<h3 style="display: inline-block">{{ $t('views.document.uploadDocument') }}</h3>
</div>
<el-card style="--el-card-padding: 0">
Expand Down
7 changes: 6 additions & 1 deletion ui/src/views/document/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@
</div>
<app-table
ref="multipleTableRef"
class="mt-16"
class="mt-16 document-table"
:data="documentData"
:pagination-config="paginationConfig"
:quick-create="
Expand Down Expand Up @@ -1206,5 +1206,10 @@ onBeforeUnmount(() => {
z-index: 22;
box-shadow: 0px -2px 4px 0px rgba(31, 35, 41, 0.08);
}
.document-table {
:deep(.el-table__row) {
cursor: pointer;
}
}
}
</style>
62 changes: 34 additions & 28 deletions ui/src/views/system-chat-user/authentication/component/LDAP.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,18 +66,26 @@
</el-form>

<div>
<el-button @click="submit(authFormRef, 'test')" :disabled="loading">
{{ $t('views.system.test') }}</el-button
>
<el-button @click="submit(authFormRef)" type="primary" :disabled="loading"
<span
v-hasPermission="
new ComplexPermission(
[RoleConst.ADMIN],
[PermissionConst.CHAT_USER_AUTH_EDIT],
[],'OR',)"
new ComplexPermission(
[RoleConst.ADMIN],
[PermissionConst.CHAT_USER_AUTH_EDIT],
[],
'OR',
)
"
class="mr-12"
>
{{ $t('common.save') }}
</el-button>
<el-button @click="submit(authFormRef)" type="primary" :disabled="loading">
{{ $t('common.save') }}
</el-button>
</span>
<span>
<el-button @click="submit(authFormRef, 'test')" :disabled="loading">
{{ $t('views.system.test') }}
</el-button>
</span>
</div>
</div>
</el-scrollbar>
Expand All @@ -101,9 +109,9 @@ const form = ref<any>({
password: '',
ou: '',
ldap_filter: '',
ldap_mapping: ''
ldap_mapping: '',
},
is_active: true
is_active: true,
})

const authFormRef = ref()
Expand All @@ -115,44 +123,44 @@ const rules = reactive<FormRules<any>>({
{
required: true,
message: t('views.system.authentication.ldap.serverPlaceholder'),
trigger: 'blur'
}
trigger: 'blur',
},
],
'config.base_dn': [
{
required: true,
message: t('views.system.authentication.ldap.bindDNPlaceholder'),
trigger: 'blur'
}
trigger: 'blur',
},
],
'config.password': [
{
required: true,
message: t('views.login.loginForm.password.placeholder'),
trigger: 'blur'
}
trigger: 'blur',
},
],
'config.ou': [
{
required: true,
message: t('views.system.authentication.ldap.ouPlaceholder'),
trigger: 'blur'
}
trigger: 'blur',
},
],
'config.ldap_filter': [
{
required: true,
message: t('views.system.authentication.ldap.ldap_filterPlaceholder'),
trigger: 'blur'
}
trigger: 'blur',
},
],
'config.ldap_mapping': [
{
required: true,
message: t('views.system.authentication.ldap.ldap_mappingPlaceholder'),
trigger: 'blur'
}
]
trigger: 'blur',
},
],
})

const submit = async (formEl: FormInstance | undefined, test?: string) => {
Expand All @@ -177,9 +185,7 @@ function getDetail() {
if (res.data && JSON.stringify(res.data) !== '{}') {
form.value = res.data
if (res.data.config.ldap_mapping) {
form.value.config.ldap_mapping = JSON.stringify(
JSON.parse(res.data.config.ldap_mapping)
)
form.value.config.ldap_mapping = JSON.stringify(JSON.parse(res.data.config.ldap_mapping))
}
}
})
Copy link
Copy Markdown
Contributor Author

@shaohuzhang1 shaohuzhang1 Aug 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code appears to be generally well-structured, but there are a few areas that could improve:

  1. Comments and Documentation: Ensure all comments explain each part of the code, especially complex logic or significant changes.

  2. Code Formatting:

    • Use consistent indentation (e.g., 4 spaces).
    • Add line breaks between blocks for readability.

  3. Complexity Management:

    • The new ComplexPermission call is slightly repetitive. Consider extracting it into a reusable function for easier maintenance.

  4. String Interpolation:

    • Use template literals consistently for better readability and security when dealing with strings.

  5. Conditional Logic:

    • Consider refactoring conditionals to reduce duplication. For example, you can extract common parts of conditions into separate variables.

Here's an updated version of the code with some of these improvements:

<template>
  <el-scrollbar style="height: 100%">
    <!-- ... (previous content unchanged) -->
    
    <div class="actions">
      <span v-if="$hasPermission(new ComplexPermission([RoleConst.ADMIN], [PermissionConst.CHAT_USER_AUTH_EDIT], []))" class="mr-12">
        <el-button @click="submit(authFormRef)" type="primary" :disabled="loading">{{ $t('common.save') }}</el-button>
      </span>
      
      <span>
        <el-button @click="submit(authFormRef, 'test')" :disabled="loading">{{ $t('views.system.test') }}</el-button>
      </span>
    </div>

    <!-- ... (rest of the component unchanged) -->
  </el-scrollbar>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { FormInstance, reactive, ref } from 'vue';
// other imports

export default defineComponent({
  setup(props, context) {
    // ... (setup method unchanged)

    const actionsHtml = (
      <div class="actions">
        <span v-if={this.$hasPermission(new ComplexPermission([RoleConst.ADMIN], [PermissionConst.CHAT_USER_AUTH_EDIT], []))} class="mr-12">
          <el-button onClick={() => this.submit(this.authFormRef)} type="primary" disabled={this.loading}>{this.$t('common.save')}</el-button>
        </span>
        
        <span>
          <el-button onClick={() => this.submit(this.authFormRef, 'test')} disabled={this.loading}>{this.$t('views.system.test')}</el-button>
        </span>
      </div>
    );

    return {
      authFormRef,
      actionsHtml,
      // other returns
    };
  }
});
</script>

<style scoped>
.actions span:not(:last-child) {
  margin-right: 12px;
}
</style>

These changes help maintain cleaner and more readable code while ensuring proper functionality.

Expand Down
2 changes: 1 addition & 1 deletion ui/src/views/system-chat-user/authentication/component/SCAN.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
<div v-if="item.isValid" class="border-t mt-16">
<el-row :gutter="12" class="mt-16">
<el-col v-for="(value, key) in item.config" :key="key" :span="12">
<el-text type="info" class="lighter">{{ formatFieldName(key, item) }}</el-text>
<el-text class="color-secondary lighter">{{ formatFieldName(key, item) }}</el-text>
<div class="mt-4 mb-16 flex align-center">
<span
v-if="key !== 'app_secret'"
Expand Down
Loading
Loading