kevin/ops2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

日期选择器

Browse Source
This commit is contained in:
kevin
2025-11-17 20:33:45 +08:00
parent 40bd6e5a22
commit 5fd691c7b5
9 changed files with 246 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontent/ops_vue_js/package-lock.json
Generated
+7
View File
@@ -12,6 +12,7 @@
"@tabler/icons-vue": "^3.35.0",
"axios": "^1.13.2",
"bootstrap": "^5.3.8",
"litepicker": "^2.0.12",
"pinia": "^3.0.4",
"vue": "^3.5.22",
"vue-i18n": "^11.1.12",
@@ -2349,6 +2350,12 @@
"dev": true,
"license": "MIT"
},
"node_modules/litepicker": {
"version": "2.0.12",
"resolved": "https://registry.npmjs.org/litepicker/-/litepicker-2.0.12.tgz",
"integrity": "sha512-1N0sZJca/eALvS1hbJsVqKXwJAmp0BsJn73kZKWGGLjZkvjKr7HXGPV+/shu60aEY/JXoOg2XUmo7hbdIOsFpQ==",
"license": "MIT"
},
"node_modules/lru-cache": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
frontent/ops_vue_js/package.json
+1
View File
@@ -16,6 +16,7 @@
"@tabler/icons-vue": "^3.35.0",
"axios": "^1.13.2",
"bootstrap": "^5.3.8",
"litepicker": "^2.0.12",
"pinia": "^3.0.4",
"vue": "^3.5.22",
"vue-i18n": "^11.1.12",
frontent/ops_vue_js/src/components/HeardMain.vue
+1 -1
View File
@@ -213,7 +213,7 @@ onMounted(() => {
<router-link to="" class="dropdown-item">{{
t("message.user_home")
}}</router-link>
<router-link to="" class="dropdown-item">{{
<router-link to="/settings/account" class="dropdown-item">{{
t("message.user_settings")
}}</router-link>
<router-link to="" class="dropdown-item">{{
frontent/ops_vue_js/src/components/datePicker.vue
+66
View File
@@ -0,0 +1,66 @@
<script setup>
import { onMounted, ref } from "vue";
import Litepicker from "litepicker";
const datepicker_inline = ref(null);
onMounted(() => {
// @formatter:off
new Litepicker({
element: datepicker_inline.value,
lang: 'zh-cn',
firstDay: 0,
buttonText: {
previousMonth: `<!-- Download SVG icon from http://tabler-icons.io/i/chevron-left -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6" /></svg>`,
nextMonth: `<!-- Download SVG icon from http://tabler-icons.io/i/chevron-right -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>`,
},
inlineMode: true,
});
// @formatter:on
});
</script>
<template>
<div class="input-icon">
<span class="input-icon-addon"
><!-- Download SVG icon from http://tabler-icons.io/i/calendar -->
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"
/>
<path d="M16 3v4" />
<path d="M8 3v4" />
<path d="M4 11h16" />
<path d="M11 15h1" />
<path d="M12 15v3" />
</svg>
</span>
<input
class="form-control"
placeholder="Select a date"
id="datepicker-icon-prepend"
value="2020-06-20"
/>
</div>
<div class="mb-3">
<label class="form-label">Inline datepicker</label>
<div class="datepicker-inline" ref="datepicker_inline"></div>
</div>
</template>
frontent/ops_vue_js/src/components/settingNavigation.vue
+32
View File
@@ -0,0 +1,32 @@
<script setup>
import { RouterLink } from "vue-router";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
</script>
<template>
<div class="col-12 col-md-3 border-end">
<div class="card-body">
<div class="list-group list-group-transparent">
<router-link
to="/settings/account"
class="list-group-item list-group-item-action d-flex align-items-center active"
>
{{t('settings.account_settings')}}</router-link
>
</div>
<h4 class="subheader mt-4">{{t('settings.admin')}}</h4>
<div class="list-group list-group-transparent">
<router-link
to="/settings/account"
class="list-group-item list-group-item-action d-flex align-items-center active"
>
{{t('settings.website_settings')}}</router-link
>
</div>
</div>
</div>
</template>
frontent/ops_vue_js/src/i18n/en.json
+23
View File
@@ -47,6 +47,29 @@
"preferences": "Preferences",
"administrator": "Administrator"
},
"settings": {
"account_settings": "Account Settings",
"my_account": "My Account",
"profile_information": "Profile Information",
"change_avatar": "Change Avatar",
"change_email": "Change Email",
"name": "Name",
"remark": "Remark",
"email": "Email",
"gender": "Gender",
"male": "Male",
"female": "Female",
"birthday": "Birthday",
"admin": "Admin",
"website_settings": "Website Settings",
"site_name": "Site Name",
"logo_settings": "Logo Settings",
"site_description": "Site Description",
"site_keywords": "Site Keywords",
"save_changes": "Save Changes",
"password": "Password",
"set_new_password": "Set New Password"
},
"button": {
"submit": "Submit",
"cancel": "Cancel",
frontent/ops_vue_js/src/i18n/zh-CN.json
+23
View File
@@ -47,6 +47,29 @@
"preferences": "偏好设置",
"administrator": "管理员"
},
"settings": {
"account_settings": "个人设置",
"my_account": "我的账户",
"profile_information": "个人信息",
"change_avatar": "更改头像",
"change_email": "更改邮箱",
"name": "姓名",
"remark": "备注",
"email": "邮箱",
"gender": "性别",
"male": "男",
"female": "女",
"birthday": "生日",
"admin": "管理员",
"website_settings":"网站设置",
"site_name": "网站名称",
"logo_settings": "Logo设置",
"site_description": "网站描述",
"site_keywords": "网站关键词",
"save_changes": "保存更改",
"password": "密码",
"set_new_password": "设置新密码"
},
"button": {
"submit": "提交",
"cancel": "取消",
frontent/ops_vue_js/src/router/index.js
+5
View File
@@ -45,6 +45,11 @@ const router = createRouter({
path: "/admin",
name: "admin",
component: () => import("../views/adminView.vue"),
},
{
path: "/settings/account",
name: "settings account",
component: () => import("../views/settings/account.vue"),
},
],
});
frontent/ops_vue_js/src/views/settings/account.vue
+88
View File
@@ -0,0 +1,88 @@
<script setup>
import settingNavigation from "@/components/settingNavigation.vue";
import { useI18n } from "vue-i18n";
import datePicker from "@/components/datePicker.vue";
const { t } = useI18n();
</script>
<template>
<div class="page-wrapper">
<div class="page-header d-print-none">
<div class="container-xl">
<h2 class="page-title">{{ t("settings.account_settings") }}</h2>
</div>
</div>
<div class="page-body">
<div class="container-xl">
<div class="card">
<div class="row g-0">
<settingNavigation />
<div class="col-12 col-md-9 d-flex flex-column">
<div class="card-body">
<h2 class="mb-4">{{ t("settings.my_account") }}</h2>
<h3 class="card-title">
{{ t("settings.profile_information") }}
</h3>
<div class="row align-items-center">
<div class="col-auto">
<span
class="avatar avatar-xl"
style="background-image: url(./static/avatars/000m.jpg)"
></span>
</div>
<div class="col-auto">
<button class="btn">
{{ t("settings.change_avatar") }}
</button>
</div>
</div>
<h3 class="card-title mt-4">-</h3>
<div class="row g-3">
<div class="col-md">
<div class="form-label">{{ t("settings.name") }}</div>
<input type="text" class="form-control" />
</div>
<div class="col-md">
<div class="form-label">{{ t("settings.remark") }}</div>
<input type="text" class="form-control" />
</div>
<div class="col-md">
<div class="form-label">{{ t("settings.birthday") }}</div>
<input type="text" class="form-control" />
<datePicker />
</div>
<div>
<button class="btn">{{ t("settings.save_changes") }}</button>
</div>
</div>
<h3 class="card-title mt-4">{{ t("settings.email") }}</h3>
<div>
<div class="row g-2">
<div class="col-auto">
<input type="text" class="form-control w-auto" />
</div>
<div class="col-auto">
<button class="btn">
{{ t("settings.change_email") }}
</button>
</div>
</div>
</div>
<h3 class="card-title mt-4">{{ t("settings.password") }}</h3>
<input type="password" class="form-control w-auto mb-1" />
<input type="password" class="form-control w-auto mb-1" />
<input type="password" class="form-control w-auto mb-1" />
<div>
<button class="btn">{{ t("settings.set_new_password") }}</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>