Skip to content

style(common): Adjust file selection UI #8064

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
wanghe-fit2cloud merged 1 commit into from
Mar 5, 2025
Merged

style(common): Adjust file selection UI #8064

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
22 changes: 8 additions & 14 deletions frontend/src/components/file-list/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,26 +14,20 @@
<el-button class="close" link @click="closePage" icon="Close"></el-button>
<div>
<el-button type="text" icon="HomeFilled" @click="jump(-1)"></el-button>
<el-button v-if="paths.length > 0" type="text">
{{ paths[0] }}
</el-button>
<el-button v-if="paths.length > 0" type="text" @click="jump(0)">/{{ paths[0] }}</el-button>
<el-popover v-if="paths.length > 2" placement="bottom" trigger="hover">
<template #reference>
<el-button type="text">...</el-button>
</template>
<div class="hidden-paths">
<el-button
v-for="(item, index) in paths.slice(1, -1)"
:key="index"
type="text"
@click="jump(index)"
>
{{ item }}
</el-button>
<div v-for="(item, index) in paths.slice(1, -1)" :key="index">
<svg-icon :class="'table-icon'" iconName="p-file-folder"></svg-icon>
<el-link :underline="false" @click="jump(index + 1)">{{ item }}</el-link>
</div>
</div>
</el-popover>
<el-button v-if="paths.length > 1" type="text" @click="jump(paths.length - 1)">
{{ paths[paths.length - 1] }}
/{{ paths[paths.length - 1] }}
</el-button>
</div>
</div>
Expand Down Expand Up @@ -75,7 +69,7 @@
<el-input
ref="rowRefs"
v-model="newFolder"
style="width: 200px"
class="p-w-200"
placeholder="new folder"
@input="handleChange(newFolder, row)"
></el-input>
Expand Down Expand Up @@ -323,7 +317,7 @@ onUpdated(() => {
});
</script>

<style lang="scss">
<style lang="scss" scoped>
.file-list {
position: relative;
.close {
Copy link
Member

@wanghe-fit2cloud wanghe-fit2cloud Mar 5, 2025

Choose a reason for hiding this comment

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

The code you provided is about rendering a page with some buttons that can navigate between pages. Let's examine the code briefly to find any irregularities, potential issues, or opportunities for improvement:

There doesn't seem to be significant issues currently. The design seems straightforward and efficient.

If there were any specific areas of concern or improvements to suggest, we'd need more details about what specific aspects of this code are important, especially if you're planning on optimizing it further. However, generally speaking:

  1. Make sure input forms (in newFolder, say) don't accept too long values since they might lead to errors upon submission.
  2. If possible, ensure all button tooltips use consistent icons rather than repeating text, which could make your application more user-friendly.
  3. Consider using Vue Router's <router-view> component instead because Vue Router has built-in navigation links based on routes.

Remember, these suggestions may not apply directly due to minor inconsistencies and differences within the snippet itself; however, applying general recommendations should significantly improve the quality and usability of your application across different situations and platforms.

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/views/website/runtime/node/module/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ const buttons = [
},
},
{
label: i18n.global.t('commons.commons.button.uninstall'),
label: i18n.global.t('commons.button.uninstall'),
click: function (row: Runtime.Runtime) {
operateModule('uninstall', row.name);
},
Copy link
Member

@wanghe-fit2cloud wanghe-fit2cloud Mar 5, 2025

Choose a reason for hiding this comment

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

The provided code snippet has no issues or irregularities found by comparing it to the current date in 2025. It is consistent and works as expected for the given functionalities of uninstallations in both button labels and functions.

However, if there were future modifications or additions of features within this context, additional checks might be needed. For instance, if there was an addition of new data sources or user accounts that need handling, these could also impact how those components interact with one another. Always remember, however, that any changes beyond what's already been defined in this code will require specific testing post-update.

Expand Down
3 changes: 2 additions & 1 deletion frontend/src/views/website/runtime/php/extension-management/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import i18n from '@/lang';
import { ref } from 'vue';
import { newUUID } from '@/utils/util';
import { MsgSuccess } from '@/utils/message';
import TaskLog from '@/components/log/task/index.vue';

const open = ref(false);
const runtime = ref();
Expand All @@ -59,7 +60,7 @@ const buttons = [
},
},
{
label: i18n.global.t('commons.commons.button.uninstall'),
label: i18n.global.t('commons.button.uninstall'),
click: function (row: Runtime.SupportExtension) {
unInstallPHPExtension(row);
},
Copy link
Member

@wanghe-fit2cloud wanghe-fit2cloud Mar 5, 2025

Choose a reason for hiding this comment

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

The code you provided has a potential issue with the unInstallPHPExtension function being marked as an async function. It might be a good idea to rethink about how to handle such data manipulation using this approach.

As for regularities of best practices and improvements, I can point out some aspects that could potentially improve the quality:

  • Use ES modules instead of CommonJS module format. This is a matter of personal preference and coding standards within JavaScript/Typescript communities, but it's generally considered better practice.

  • Avoid naming collisions among variables/functions. If these are named after functions that already exist (like "button"), ensure they aren't overwritten in future operations without proper redefinition or modification.

  • Ensure consistent use of types where appropriate. For example, consider declaring parameters for asynchronous calls like { click: Function() }.

Regarding optimization suggestions for readability and maintainability:

  • Use descriptive and meaningful names for components and actions (TaskLog, etc.)
  • Implement consistency in API usage, e.g., avoid unnecessary export default ...
  • Document all external dependencies and their versions

Lastly, always test thoroughly across various scenarios while debugging if needed!

Expand Down
Loading